jQuery中的AJAX

Ajax用的最多，也就是那几个方法，因为暂时研究的并不深，而且jquery里面又封装的那么好，所以就放在jquery里了。

 

1、load（）

我从没想到这货居然是ajax，一般用于获取静态文件，

<script>
        $(function () {
            $("#go").click(function () {
                $("#res").load("t2.html");           
            });
        })
        
</script>
    
</head>
<body>
    <input type="button" id="go" value="Ajax" />
    <div id="res" style="width:500px; height:500px; background-color:#b6ff00">

    </div>
</body>

load（）方法会把获取到的html去掉html，head，body等与主页面有关的标签，然后将有用的信息插入到主页面的要插入的地方，

load（）方法也是有回调函数的，里面有2个参数 responseText代表 返回的内容，textStatus 表示 请求状态 success  error  timeout motmodified 4种，load（）比较奇特，就算你不写回调函数也没有关系，无论ajax有没有成功，只要此次请求完成，这个回调函数会自动执行（这是和$.get（）等最大的区别了），如果ajax报错也不会影响主页面，只是没有反应而已，另外回调函数里的参数名可以自定义，它会自己识别的

<script>
        $(function () {
            $("#go").click(function () {             
                $("#res").load("t2.html", function (responseText, textStatus)
                {
                    alert(textStatus+"         "+responseText);
                });
            });
        })
        
    </script>
    
</head>
<body>
    <input type="button" id="go" value="Ajax" />
    <div id="res" style="width:500px; height:500px; background-color:#b6ff00">

    </div>
</body>

结果是：

另外，load（）方法如果有参数的话，那就是post方式(那就不能是请求静态文件了)，没有的话就是get方式，如果不想把整个静态文件都加载过来，只需要一部分的话，则可以 在请求的url 后加相应的calss 或者 id等方式

 $("#res").load("t2.html .para"）;

2、$.get(,,,)这个是get请求，他的回调函数是在本次请求成功后才触发，也正因为如此，如果想判断是否执行了回调函数的时候，就可以加入alert(1)来测试了，哈哈，另外最后一个参数是支持返回的类型，别的就不说了，就说说json格式吧
对于这个json的话，ajax就没什么说的了，就是动态页返回的json要说一下，Response.Write(new {name="xiaomign",age=25})我以为这就是json了，其实大错特错，这是在后台，生成了一个匿名对象而已，还需要转换成
对应的json字符串，哈哈

index2.aspx
        protected void Page_Load(object sender, EventArgs e)
        {
            string na = Request["username"].ToString();
            string ag = Request["age"].ToString();
            Response.Write(new JavaScriptSerializer().Serialize(new { name = na, age = ag }));
        }

<script>
        $(function () {
            $("#go").click(function () {
                $.get("/index2.aspx", { username: "你大爷", age: 25 }, function (data, textStatus) {
                    $("#name").text(data.name);
                    $("#age").text(data.age);
                }, "json");
            });
        })

    </script>

</head>
<body>
    <input type="button" id="go" value="Ajax" />
    <div id="res" style="width:500px; height:500px; background-color:#b6ff00">
        <span id="name"></span>
        <span id="age"></span>
    </div>

还有啊，好久没写jquery了，居然text的用法不会了，写成了 $("#name").text=data.name; 哈哈 笑死了

 

3、$.getJSON(，，)和$.get(）type=json的时候基本上是一样的，前者可以跨域，就很厉害了，只有3个参数，也是只有请求成功的时候才执行回调。

4、$.getScript(，)请求的是js文件，另外一个参数自然就是 回调函数了。

5、$.post()用法就不说了。

6、说一说jquery最底层的ajax方法——$.ajax()

1.url: 
要求为String类型的参数，（默认为当前页地址）发送请求的地址。

2.type: 
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

3.timeout: 
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

4.async: 
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

5.cache: 
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

6.data: 
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

7.dataType: 
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。

 这只是常用的几个参数而已，其实$.ajax({})只有一个参数，其余的那些都是在里面写的

$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty();   //清空resText里面的所有内容
                         var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username']
                                         + ':</h6><p class="para"' + comment['content']
                                         + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});

 

7、序列化serialize(),我们在get，post的时候传递的参数都是{name；"asdf",age:12}这种格式，但是对于表单对象来说，有时候要提交好多个参数的时候，还一个个枚举出来的话，就太不合适了，因此将表单对象
序列化，就OK了。serialize()只是将参数序列化为字符串格式，最后是一个字符串  单选框和复选框只能是在选中的情况下才可以被序列化  name=asdf&age=12
  $.get("/index2.aspx",$("#form1").serialize() , function (data, textStatus) {
                   
                }, "json");


8、serializeArray()也是序列化，但是它返回的不是字符串而是json对象，这是这2个方法的最大的区别，既然是json，那么就可以用$.each()来遍历一下，看看json。


 




对所有标签序列化 
$("#form1").serializeArray()   
/* 以下是序列化后的结果数组formArray的内容：
[
    { name: "uid", value: "1" },
    { name: "username", value: "张三" },
    { name: "password", value: "123456" },
    { name: "grade", value: "3" },
    { name: "sex", value: "1" },
    { name: "hobby", value: "1" },
    { name: "hobby", value: "2" }
];
*/

对部分标签序列化
var result = $(":text, select, :checkbox").serializeArray();
/* 以下是序列化后的结果数组result的内容：
[ 
    { name: "username", value: "张三" }, 
    { name: "password", value: "123456" },
    { name: "grade", value: "3" },
    { name: "hobby", value: "1" },
    { name: "hobby", value: "2" }
];
*/




 


 注意的是：无论是用serialize()还是serializeArray()都用应是标签有name，有value，切记切记。


 


 平时看见的加载中也是ajax




            $("#loading").ajaxStart(function () {
                $(this).show();
            })
            $("#loading").ajaxStop(function () {
                $(this).hide();
            })




ajax还有几个全局事件，我就给简称为ajax的生命周期吧，哈哈


 补充一下：form表单里的submit按钮，如果不是aspx页面的话，当点击submit按钮的时候使用ajax要注意




            $("#form1").submit(function () {
                $.post('', {}, function (data) {

                });
                return false;
            });




为了阻止其真正意义上的提交，只是单纯的进行ajax提交，应该return false；











        

        

            posted on 
2017-04-24 10:00 
奔游浪子 
阅读(102) 
评论(0) 
 
收藏 
举报

        

    










    
    

    
    

    

        

    

        

            
                
                
            
        

    

    
    

    

    





            

        

        

            

导航