用wamp实现前端和php的交互效果

标签：ted   one   执行   form   random   nec   state   status   那是   

我们今天来用php来做一下前台与后台的交互效果，首先我们先打开这个软件。

看一下电脑右下角的小图标

当变成之后鼠标左键

打开这个之后点击第二个之后会打开一个网站

点击右面页面的数据库打开新建数据库，填入数据库名称和模式

后点击创建，出现创建成功弹出框后，点击右面页面中我们新创建的数据库

在新建数据库中新建一个数据表，填入数据表的名字和字段数

因为我只想要密码和用户名两条数据，所以我只要连个字段数之后点击执行，弹出一个页面框，我们把自己想要的数据名和格式填入表中

创建之后我们将滚动条往下翻，找到保存，别点击执行，因为那是当你想要的数据过多时，字段数不够时，另添加几条字段数的。完事之后我们新建一个网页和PHP文件和一个ajax文件

 之后我们就要写前端的东西了

这是ajax文件

//将数据转换成 a=1&b=2格式;

function json2url(json){

   var arr = [];

   //加随机数防止缓存;

   json.t = Math.random();

   for(var name in json){

      arr.push(name+‘=‘+json[name]);

   }

   return arr.join(‘&‘);

}

function ajax(json){

   //考虑默认值:

   if(!json.url){

      alert(‘请输入合理的请求地址!‘);

      return;

   }

   json.type = json.type || ‘get‘;

   json.time = json.time || 5000;

   json.data = json.data || {};

      //1.创建一个ajax对象;

      var timer = null;

   if(window.XMLHttpRequest){

      var oAjax = new XMLHttpRequest();

   }else{

      var oAjax = new ActiveXObject(‘Microsoft.XMLHTTP‘);

   }

   //判断用户传递的是get还是post请求:

   switch (json.type.toLowerCase()){

      case ‘get‘:

         //2.打开请求；

         oAjax.open(‘get‘,json.url+‘?‘+json2url(json.data),true);

         //3.发送数据:

         oAjax.send();

         break;

      case ‘post‘:

         //打开请求;

         oAjax.open(‘post‘,json.url,true);

         //设置请求头;

         oAjax.setRequestHeader(‘Content-type‘,‘application/x-www-form-urlencoded‘);

         //发送数据;

         oAjax.send(json2url(json.data));

         break;

   }

    json.fnLoading && json.fnLoading();

   //4.获取响应数据

   oAjax.onreadystatechange = function(){

      if (oAjax.readyState == 4) {

       json.complete && json.complete();

         if (oAjax.status >= 200 && oAjax.status

            //如果外边传递了成功的回调函数，那么就执行,

            json.success && json.success(oAjax.responseText);

         } else {

            //如果外边传递了失败的回调函数，那么就弹出错误码,

            json.error && json.error(oAjax.status);

         }

         clearTimeout(timer);//规定时间内取到数据后清除定时器;

      }

   };

};

这是html文件

img {

width: 20px;

height: 30px;

display: none;

}

window.onload = function() {

var oUser = document.getElementById(‘user‘);

var oPass = document.getElementById(‘pass‘);

var oBtn1 = document.getElementById(‘btn1‘);

var oBtn2 = document.getElementById(‘btn2‘);

var oImg = document.getElementById(‘img‘);

var oSpan = document.getElementById(‘span‘);

oBtn1.onclick = function() {

oImg.style.display = "block";

ajax({

url: ‘user.php‘,

data: {

act: ‘lgn‘,

user: oUser.value,

pass: oPass.value

},

fnLoading: function() {

oImg.style.display = ‘block‘;

},

success: function(res){

var json = eval("(" + res + ")");

if(json.err) {

oSpan.innerHTML = json.msg;

oImg.style.display = "none";

} else {

oSpan.innerHTML = json.msg;

oImg.style.display = "none";

}

},

error: function(s){

alert(s);

}

});

}

}

username:

password: