利用ajax实现与php数据交互，并局部刷新页面
<p>本文主要有以下几个要点：</p><p>ajax的基本语法结构</p>
<p>jQuery基本语法</p>
<p>json数组基本结构</p>
<p>ajax回调函数中的json数组解析及局部刷新</p>
<p>php基本语法</p>
<p>ajax与php的对接</p>
<p>php中post数据提交方式与接收</p>
<p>ajax基本语法<br>$.ajax({<br> type: "post",//数据提交方式（post/get）<br> url: "demo.php",//提交到的url<br> data: {username:username,password:password},//提交的数据<br> dataType: "json",//返回的数据类型格式<br> success: function(msg){<br> ...//返回成功的回调函数<br> },<br> error:function(msg){<br> ...//返回失败的回调函数<br> }<br>});<br>php端的接收方法<br><?php<br> $username=$_POST['username'];//接收以post方式提交来的username数据<br> $password=$_POST['password'];</p>
<p> </p>
<div class="cnblogs_code">
<pre><?<span style="color: rgba(0, 0, 0, 1)">php
</span><span style="color: rgba(0, 128, 128, 1)">header</span>('Content-type:text/json;charset=utf-8'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(128, 0, 128, 1)">$username</span>=<span style="color: rgba(128, 0, 128, 1)">$_POST</span>['username'<span style="color: rgba(0, 0, 0, 1)">];
</span><span style="color: rgba(128, 0, 128, 1)">$password</span>=<span style="color: rgba(128, 0, 128, 1)">$_POST</span>['password'<span style="color: rgba(0, 0, 0, 1)">];
</span><span style="color: rgba(128, 0, 128, 1)">$data</span>='{username:"' . <span style="color: rgba(128, 0, 128, 1)">$username</span> . '",password:"' . <span style="color: rgba(128, 0, 128, 1)">$password</span> .'"}';<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">组合成json格式数据</span>
<span style="color: rgba(0, 0, 255, 1)">echo</span> json_encode(<span style="color: rgba(128, 0, 128, 1)">$data</span>);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">输出json数据</span></pre>
</div>
<div class="cnblogs_code">
<pre><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajaxTest</title>
</head>
<body>
<input type="text" id="username">
<input type="text" id="password">
<button id="sub">查询</button>
<span id="text"></span><!-- 用以显示返回来的数据，只刷新这部分地方 -->
</body>
<script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script><span style="color: rgba(0, 0, 0, 1)">
$(</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
$(</span>'#sub').click(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
</span><span style="color: rgba(0, 0, 255, 1)">var</span> username=$('#username').<span style="color: rgba(0, 0, 0, 1)">val();
</span><span style="color: rgba(0, 0, 255, 1)">var</span> password=$('#password').<span style="color: rgba(0, 0, 0, 1)">val();
$</span>.<span style="color: rgba(0, 0, 0, 1)">ajax({
type</span>: "post",<span style="color: rgba(0, 0, 0, 1)">
url</span>: "demo.php",<span style="color: rgba(0, 0, 0, 1)">
data</span>: {username:username,password:password},<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">提交到demo.php的数据</span>
dataType: "json",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">回调函数接收数据的数据格式</span>
success: <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(msg){
$(</span>'#text').<span style="color: rgba(0, 0, 255, 1)">empty</span>(); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">清空Text里面的所有内容</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> data=''<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(msg!=''<span style="color: rgba(0, 0, 0, 1)">){
data </span>= <span style="color: rgba(0, 0, 255, 1)">eval</span>("("+msg+")"); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">将返回的json数据进行解析，并赋给data</span>
<span style="color: rgba(0, 0, 0, 1)"> }
$(</span>'#text').html("用户名为：" + data.username + ",密码为：" + data.password); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">在#text中输出</span>
console.<span style="color: rgba(0, 128, 128, 1)">log</span>(data); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">控制台输出</span>
},<span style="color: rgba(0, 0, 0, 1)">
error</span>:<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(msg){
console</span>.<span style="color: rgba(0, 128, 128, 1)">log</span><span style="color: rgba(0, 0, 0, 1)">(msg);
}
});
});
})
</span></script>
</html></pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/fuhuo/p/11230806.html
頁:
[1]