jQuery实例：jQuery Ajax中的data如何传递到php后端
Posted Web学习笔记
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实例：jQuery Ajax中的data如何传递到php后端相关的知识，希望对你有一定的参考价值。
jQuery Ajax中的data如何传递到php后端
即“Asynchronous Javascript And XML”（异步 javascript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML。对于很多初学者来说，很难以理解与应用，特别是data数据的传输。首先我们先对比一下原生JavaScript中的post请求与jQuery中的ajax post请求的，get与其差不多。
原生JavaScript：
var xhr = new XMLHttpRequest();
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
});
话不多说，先看源码！！！
<div class="login">
<form class="login_form" method="post" action="tajax.php">
<input type="text" id="user" class="sty" placeholder="请输入用户名"/><br />
<input type="password" id="pass" class="sty" placeholder="请输入密码" /><br />
<input type="submit" id="btn" value="登录" />
</form>
</div>
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里面的数据作为参数传递
Web学习笔记
技术&资源&学习
以上是关于jQuery实例：jQuery Ajax中的data如何传递到php后端的主要内容，如果未能解决你的问题，请参考以下文章