关于ajax的一些简单介绍。

浏览:13846 发布日期:2013/11/30 分类:技术分享 关键字: ajax php js
我最近在整理一些相关的东西,还不够完善,如果有机会会发个帖出来。
希望对你们有所帮助。

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:排版好难!






最佳答案
评论() 相关
后面还有条评论,点击查看>>