ajax的基本语法
$.ajax({
type: "post", //数据提交方式(post/get)
url: "demo.php", //提交到的url
data: {"key1":"value1","key2":"value2"},//提交的数据
dataType: "json",//返回的数据类型格式
success: function(msg){
//code...返回成功的回调函数
},
error:function(msg){
//code...返回失败的回调函数
}
});
html端:
<!--要提交的表单-->
<form method="post" action="demo.php" id="formid" >
<input type="text" name="username" id="username"/>
<button id="submit" type="submit">submit</button>
</form>
<!--局部更新的区域-->
<div id="display"></div>
php服务端代码demo.php:
<?php
$username = $_POST['username'];
$data = "{username:'$username'}";//组合成json格式数据
echo json_encode($data);//返回json格式数据
?>
html端的script代码:
<script>
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault();//阻止默认的表单提交
username = $("#username").val();//获取表单的输入值
$.ajax({
type:"POST",
url:"demo.php",
data:{"username":username},//提交到demo.php的数据
dataType:"json",//回调函数接收数据的格式
success:function(msg){
$("#display").empty();//清空
data = eval("("+msg+")");//将返回的json解析成json对象
$("#display").html("hello: "+data.username);
console.log(msg);
console.log(data);
},
error:function(msg){
console.log("request fail:"+msg);
}
});
});
});
</script>
结果:
控制台console显示的结果:
只有转成json对象格式才能才能用.value
的形式获取
改进,让php直接返回json对象就无需转换
json_encode()函数能够把数组直接转成json对象
所以,php后端代码改写为:
<?php
echo json_encode($_POST);//返回json对象格式数据
?>
html端ajax代码修改为:
$.ajax({
type:"POST",
url:"demo.php",
data:{"username":username},//提交到demo.php的数据
dataType:"json",//回调函数接收数据的格式
success:function(msg){
$("#display").empty();//清空
$("#display").html("hello: "+msg.username);
console.log(msg);
},
error:function(msg){
console.log("request fail:"+msg);
}
});
这样php后端一句代码搞定,不用自己去构造返回数据的json格式,而且script也不用把json字符串格式转成json对象
再看一下控制台的输出信息:
虽然不用再去构造返回数据的json格式,但是ajax请求时发送的表单数据也还要自己去构造。想一想,如果表单数据有一万个输入值,那么自己去构造的话。。。。
解决方法很简单:只需改变$.ajax()
内的data:
值就行了
data:$('#formid').serialize(),//你的表单id
//或者
data:$('#formid').serializeArray()
用控制台看看这两者的区别(为了更直观,我又加了一个input元素):
可以看到.serialize()
将表单要提交的内容序列化成一个类似URL的字符串格式,而.serializeArray()
则将表单内容序列化为一个json对象的结构
注意:php用include
或require
引入前端页面时,两者是在同一个运行代码里,即都是属于主线程的。这时若用该前端页面去ajax请求该php后端脚本代码,会导致请求失败。
参考资料: