前端：html+ajax
后端：php
传值方式：post（因为get方式与post相比更为简单，所以本篇以post方式传值为例）
直接上Demo：
前端代码：
<!DOCTYPE html>
<html>
<head>
<title>传值！？</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<input type="text" id="username">
<input type="text" id="password">
<button id="sub">查询</button>
<span id="text"></span><!-- 用以显示返回来的数据，只刷新这部分地方 -->
</body>
<script type="text/javascript">
$(function(){
$('#sub').click(function(){
var username=$('#username').val();
var password=$('#password').val();
$.ajax({
type: "post",
url: "demo.php", //后端php文件，此处可以写相对路径，也可以写绝对路径，写绝对路径的话注意可能存在跨域问题
data: {username:username,password:password},//提交到demo.php的数据
dataType: "json",//回调函数接收数据的数据格式
success: function(msg){
console.log(msg);
$('#text').empty(); //清空Text里面的所有内容
$('#username').val(''); //不同的元素其清空时使用的函数不同，这里输入框使用的清空函数就是val('')
$('#password').val('');
var data='';
if(msg!=''){
data = eval("("+msg+")"); //将返回的json数据进行解析，并赋给data
}
$('#text').html("用户名为：" + data.username + ",密码为：" + data.password); //在#text中输出
console.log(data); //控制台输出
},
error:function(msg){
console.log(msg);
}
});
});
})
</script>
</html>
后端PHP代码：（demo.php）
<?
header('Content-type:text/json;charset=utf-8');//这个类型声明非常关键
$username=$_POST['username'];
$password=$_POST['password'];
$data='{username:"' . $username . '",password:"' . $password .'"}';//组合成json格式数据
echo json_encode($data);//输出json数据 传数据给前台
?>
传值也分两种，一种是域内传值，一种是跨域传值，两种传值方式书写的代码不同，跨域传值需要使用jsonp才可以，而域内传值使用json或者表单都可。
前端通过ajax将数据post到后端，后端接收后进行处理，再将处理后的数据打包成json返回给前端。前端成功接收到后端返回的数据后，进入success中的逻辑，执行success中的其他语句，从而实现ajax异步更新；前端未能成功接收数据则可以进入error的逻辑中，执行error中的其他语句，如查看报错等，方便开发人员进行调试。
之前有进行过跨域传值的尝试，但是失败了，这次再次尝试域内传值时，开始也失败了，但经过在测试服务器上的调试，发现失败的原因很可能是本地的php运行环境还存在一些问题，导致php无法正常返回数据给前端。
ajax中的dataType是控制后台返回前端的数据类型的，如果传值过程中发现控制台有报错，而且是跟数据类型有关的报错，可以尝试更改或者去掉dataType。
445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
