在之前我这里是失败过很多次的,有的时候甚至不得不采用get的传送方式,另外,thinkphp自带的ajax->return方法并不能够解决问题,而且会让问题变得更加复杂,与其不如直接使用jquery的方法,全部采用post提交的方式,get提交是没有任何的问题的,但是post提交问题就一个接一个。我就一直纳闷,为什么在但一脱离框架的页面就能够畅通无阻,这个问题非常的棘手。研究了好长时间终于发现问题所在了,jquery只是前端性的东西基本上和框架扯不上太大的关系,下面是对该问题的总结:
1:
不要有from表单,他可能会自动的提交,不会有ajax的效果。
2:
url格式要正确:如:
var url=”{$smarty.const.SET_URL}index.php/Admin/Test/add”;
3:
json数据格式要正确,不能说算正确,还少我就发现这一种json写法可以实现,但是json有其他的写法,这个非常重要,一定不能写错,如:
var send_data={
"username" : username
};
每一行换行都是有道理的!
4:以post的方式接收,如
5:返回json数据:这里就不用换行了,因为JavaScript和php的json书写方式还是有一些不同的。
6:客户端接收ajax返回的数据:
返回的是json数据,必须用eval转化为对象的格式才能使用,如 json_data=eval(“(“+data+”)”);
7:就是使用了,这个就是自己的事情了。
下面是一份实例代码:
客户端代码:
<!DOCTYPE HTML>
<html>
<head>
<title>测试ajax</title>
<script type="text/javascript" src="{$smarty.const.JS_URL}jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sub").click(function(){
var username=$("#username").val();
var password=$("#password").val();
var url="{$smarty.const.SET_URL}index.php/Admin/Test/add";
var send_data={
"username" : username
};
$(document).load(url,send_data,function(data,status,httprequest){
var json_data=eval("("+data+")");
$("#get_data").text(json_data.data2);
});
});
});
</script>
</head>
<body>
<h1>Ajax测试</h1>
<!-- <form action="{$smarty.const.__SELF__}" method="post"> -->
用户名:<input type="text" name="username" id="username"><br>
密 码:<input type="password" name="password" id="password"><br/>
<button id="sub">提交测试</button>
<div id="get_data"></div>
<!-- </form>-->
</body>
</html>
服务器的代码:
public function add(){
$username=$_POST[‘username‘];
if($username=="xuning"){
echo "{‘data1‘:‘1111‘,‘data2‘:‘222‘}";
}else{
echo "xuning";
}
}
ThinkPHP以jquery传送json数据格式的方式实现ajax请求
原文地址:http://blog.csdn.net/mycodedream/article/details/46673609