jQuery框架的ajax理解运用

一．Ajax 概述
Ajax 全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）， 它并不是 JavaScript 的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形 成的结合体。使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。jQuery 对 Ajax 做了大量的封装，我们使用起来也较为方便，不需要去考虑浏览器兼容 性。

二．load()方法
.load()方法可以参数三个参数：url(必须，请求 html 文件的 url 地址，参数类型为 String)、 data(可选，发送的 key/value 数据，参数类型为 Object)、callback(可选，成功或失败的回调 函数，参数类型为函数 Function)。

//HTML
 <inputtype="button"value="异步获取数据"/> 
 <div id="box"></div>

//jQuery 
$('input').click(function(){
    $('#box').load('test.html'); //添加到box里
});

//如果想对载入的 HTML 进行筛选，那么只要在 url 参数后面跟着一个选择器即可。 
$('input').click(function(){
     $('#box').load('test.html.my'); 
});

 

二.post（）和get（）方法
如果是服务器文件，比如.php。一般不仅需要载入数据，还需要向服务器提交数据，那 么我们就可以使用第二个可选参数 data。向服务器提交数据有两种方式：get 和 post。

在 Ajax 数据载入完毕之后，就能执行回调函数 callback，也就是第三个参数。回调函数 也可以传递三个可选参数：response（请求返回）、Status（请求状态)、xhr （XMLHttpRequest 对象）。

//jQuery  post/get方法
$('input').click(function(){
    $.post('a.php',{          //第一个参数url（get方法，把post改成get）
       url:'baidu'            //第二个参数date
    },function(response,status,xhr){     //第三个参数回调函数
            alert('返回的值为：'+response+   //结果为哈哈哈
                 '，状态为：'+status +      //结果为success
                 '，状态是：'+xhr.statusText);   //结果为OK
        });
    })

//php接收 post/get 方法
    if($_POST['url']=='baidu'){   //POST改成GET
        echo'哈哈哈';
    }
    else{
        echo'错误';
    }

//get方法，改掉对应的地方

 

注意：status 得到的值，如果成功返回数据则为：success，否则为：error。
如果成功返回数据，那么 xhr 对象的 statusText 属性则返回’OK’字符串。除了’OK’的状态 字符串，statusText 属性还提供了一系列其他的值，如下：

第三个回调函数，一般来说只传递response一个参数就可以。

三.getScript() 和 getJSON()
有时我们希望能够特定的情况再加载 JS 文件，而不是一开始把所有 JS 文件都加载了。这时使用$.getScript()方法。

//点击按钮后再加载 JS 文件
 $('input').click(function(){
     $.getScript('test.js');  
 });

 

$.getJSON()方法是专门用于加载 JSON 文件的，使用方法和之前的类似。

$('input').click(function({
    $.getJSON('test.json',function(response,status, xhr){  
          alert(response[0].url); 
   }); 
});

 

四. ajax() 方法
$.ajax()是所有 ajax 方法中最底层的方法，所有其他方法都是基于ajax()方法的封装。 这个方法只有一个参数，传递一个各个功能键值对的对象。

$('input').click(function(){ 
    $.ajax({ type:'POST',    //这里可以换成 GET
    url:'a.php', 
    data:{ url:'baidu' }, 
    success:function(response,stutas,xhr){
        $('#box').html(response); 
    }
    });
});

 

五.表单序列化
使用表单序列化方法.serialize()，会智能的获取指定表单内的所有元素。这样，在面对 大量表单元素时，会把表单元素内容序列化为字符串，然后再使用 Ajax 请求。

//html
<form>
    用户名：<input type="text" name='user'/>
    密码： <input type="text" name='password' />
          <input type="button" value="提交" />
</form>
<div id="box"></div>

//jquey
$('form input[type=button]').click(function (){ 
    $.ajax({ 
        type:'POST', 
        url:'a.php', 
        data:$('form').serialize(), 
        success:function(response,status,xhr){ 
            $('#box').html(response);   
        } 
    });
});

//PHP
echo $_POST['user'].'-'.$_POST['password'];

 

学习不容易，总结出来又是九点了。

转载于:https://www.cnblogs.com/Agrass/p/6595900.html