jQuery实例：jQuery Ajax中的data如何传递到php后端

jQuery Ajax中的data如何传递到php后端

即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax = 异步JavaScript和XML。对于很多初学者来说，很难以理解与应用，特别是data数据的传输。首先我们先对比一下原生JavaScript中的post请求与jQuery中的ajax post请求的，get与其差不多。

原生JavaScript：

varxhr =newXMLHttpRequest();

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.open('post', '02.post.php');

xhr.send('name=fox&age=18');xhr.onreadystatechange=function() {if(xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } };

jQuery：

$.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType});

话不多说，先看源码！！！

HTML源码

CSS源码

.login{

width: 370px;

height: 390px;

border-radius: 10px;

background: rgba(222,111,30,0.3);

margin: 50px auto;

}

.sty{

width: 250px;

height: 35px;

border-radius: 5px;

border: 1px #C6C6C6 solid;

margin-left: 60px;

margin-top: 30px;

}

#btn{

width: 100px;

height: 40px;

border: 1px #C6C6C6 solid;

border-radius: 5px;

margin-left: 135px;

margin-top: 30px;

font-size: 18px;

font-family: "微软雅黑";

cursor:pointer;

background: rgba(8,213,109,0.8);

}

JQuery Ajax 源码

$("#btn").click(function(){

$.ajax({

type:"post",

url:"tajax.php",

async:true,

data:{

user:$("#user").val(),

pass:$("#pass").val()

},

error: function(){

alert('出现错误了');

},

success:function(XMLHttpRequest,textState){

location.href = "tajax.php?user=" + $("#user").val();

}

});

})

PHP后端源码

header('Content-Type: text/html; charset=utf-8');

$user=$_GET['user'];

echo($user)

?>

效果图

data里面的数据作为参数传递