先看效果图
这是一个将html页面的登录信息通过ajax使用json数据发送给php页面,php将数据处理后又将数据传回html页面显示
js代码
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
url:'back.php',
type:'post',
data:{"username":$("#UN").val(),"password":$("#PAW").val()}, //拼装json数组
// data:$("#fm").serialize(), //直接从form表单中取出数组
dataType:"JSON",
success:function(msg){
if(msg) {
$("p").append("账号为:" + msg.username + "<br />" + "密码为:" + msg.password );
}
else {
alert("输入异常!");
}
},
error:function(){
console.log("ERROR");
}
});
});
});
</script>
ajax中有许多参数,我们就看看上面有的几个参数:url(你要传输对象的路径+名称);type(传输方式);data(你要传输的数据)注意这里有两个data,是两种获取表单中数据的方法都可用;dataType(传输的数据类型);success(传输成功);error(传输失败)
更多参数请参考:http://www.runoob.com/jquery/ajax-ajax.html
php代码
<?php
header("Content-type:text/html;charset=utf-8");
$user = $_POST["username"];
$pas = $_POST["password"];
$json = array("username"=>$user, "password"=>$pas); //组合成json数组
$date = json_encode($json); //编译数组转化为json数据
echo $date; //将json数据传回网页
?>
在上面的效果图中我们可以看到,在php页面中从html页面获取的值在php页面是无法显示的,但这并不是错误的,这个值是可以使用的。直接试用该变量即可
form表单
<form id="fm">
<input type="text" name="username" id="UN" placeholder="请输入用户名" />
<input type="password" name="password" id="PAW" placeholder="请输入密码" />
<input type="button" id="btn" value="确定" />
<br />
<p></p>
</form>