希望对你们有所帮助。
ajax的意义,在于在页面无刷新的情况下实现数据或者表单的提交,那么我们首先需要实现对于点击事件的处理。
点击事件的处理
$('a.post_form').live('click', function ()
{
$.ajax(
{
type : "post",
url : "www.xxxx.com",
success : function (json)
{
if (json.status == 1) {
alert(json.info);
}
}
});
return false;
});每个点击事件最后要加上return false,特别是a标签,可以阻止a标签跳转,这样才能实现ajax的提交。jquery相关的知识:
$.get;
$.get("aaaa.php", { action:"get",name:"lulu" },
function(json){
alert(json.info);
});
$.post;$.post("aaaa.php", { action:"post",name:"lulu" },
function(json){
alert(json.info);
});
$.get和$.post基本没有什么不同,只是前者的type为get,后者的type为post。PHP接收数据时,前者通过$_GET来获取传递的值,比如$_GET['name'],后者通过$_POST来获取,
另外,PHP 的 $_REQUEST 变量可用来取得通过 GET 和 POST 方法发送的数据的结果。
$.ajax;
$.ajax的简单写法:
$.ajax({
type: "post",
url: "www.xxxx.com",
data: "?id=1&name=你好",
beforeSend: function(XMLHttpRequest){
},
success: function(data, textStatus){
}
}); beforeSend的作用:提交前的判断,比如不能为空。success:提交成功的提示。
dataType:多种数据格式,没有太多研究。
jquery自带的载入页面的函数:
load();
载入一个页面:
$("#result").load("aaaa.php");
只加载id为ccc的部分网页内容,可以用来实现ajax无刷新分页:$("#result").load("aaaa.php #ccc");
后台程序的处理:php:
最简单的json返回方法:
echo "1"; //此时前端 json=1;
高级的json返回方法:
json_encode($date);//此时前端 json=$date(只是意思哈);非常有用,可以自定义json的结构。
thinkphp:
$this->ajaxReturn('', '操作成功', 1)返回的值是这样的{data: "", info: "操作成功",status: 1}。
3.1版本的$this->success('操作成功!')和$this->error('写入错误!')返回的样式是这样的:{info: "操作成功",status: 0 ,url: ""},只不过status都为0。(太久没接触了,恍如隔世,待测试)
3.2版本的success返回的值中status =1 ,方便很多。
代码示例:
借用haran的代码。
前端代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入jquery -->
<script>
$(function(){
var ajaxUrl = Document.URL;
var title = $("#title").val();
$("#submit").click(function(){
$.post(ajaxUrl,{'title':title},function(json){
if(json.status == 1){
$("#result").html(json.data);
}else{
alert(json.info);
}
},dataType:'json');
});
})
</script>
</head>
<body>
<form action="">
<input type="text" name="title" id="title" />
<span id="submit">提交</span>
</form>
<div id="result"></div>
</body>
</html>
只要php有返回值,那么json就会存在,那么就会触发success。那么json.status才是判断php是否操作成功的依据。
后台代码
public function test () {
if( IS_POST ) {
$title = I('title', '', 'htmlspecialchars');
$this->ajaxReturn($title, '成功', 1);
} else {
$this->display();
}
}$this->ajaxReturn($data,'信息',1)中的三个元素依次是data,info,status。
那么在js中,就依次是json.data,json.info,json.status。
如果$data是数组,那么js中相应的就是:json.data.id,json.data.name,……。
个人建议:
很多插件也会用ajax加载数据,那么需要你的数据输出和插件要求符合的json结构,我推荐使用谷歌浏览器,使用开发者工具可以查看json的返回格式,相当有用。
PS:排版好难!
最佳答案