使用jQuery对Ajax的封装（主要是更安全，更方便）

静心物语313

发布于 2020-03-24 11:16:10

1.5K0

文章被收录于专栏：静心物语313的Coding静心物语313的Coding

使用jQuery对Ajax的封装（主要是更安全，更方便）

jQuery封装简化了Ajax，有.get、.get、.post 等不同的效果的方法。
缺点：（看不到获得失败的消息）；

这里推荐使用$.Ajax( )

主要是这个可以看到请求失败的消息。

     $.ajax({
                type: "post", url: "Ajax1.ashx",
                data: { i1: $("#txt1").val(), i2: $("#txt2").val() },
                success: function (data, txtStatus) {alert(data);},
                error: function () { alert("错误"); }
            });

Ajax方法的参数就是一个字典，最好设定post提交方式，
data 是提交到服务器的报文体。
success为请求成功的处理事件。
error为请求通讯失败的处理事件（服务器错误500，404错误等）

介绍三种Ajax对Json的处理方法

第一种：比较麻烦的，不推荐使用的

 $(function () {
            $.ajax({
                type:"post",url:"jQueryAjaxTest.ashx",
                data:{i1:10,i2:30},            
                success: function (resTxt) {
                    //alert(resTxt);
                    var nums=$.parseJSON(resTxt);//json字符串转化为javascript对象  （不建议用这个，这个太麻烦！）
                    for (var i = 0; i < nums.length; i++) {
                        alert(nums[i]);
                    }
                },
                error:function(){
                    alert("ajax出错！");
                }
            });
        });

#### 以上这种使用的$.parseJson()把字符串解析为JavaScript对象，但是比eval()更安全 ####

后边的两种是以后经常使用的方式

第二种：Ajax请求中设定dataType: “json”

       $(function () {
            $.ajax({
                type: "post", url: "jQueryAjaxTest.ashx",
                dataType:"json",    //这里从服务器中拿到的json字符串，通过这一语句设置后，就是间接地通过了paseJson（）方法来变成了javascript对象
                data: { i1: 10, i2: 30 },
                success: function (resTxt) {
                    for (var i = 0; i < resTxt.length; i++) {
                        alert(resTxt[i]);
                    }
                },
                error: function () {
                    alert("ajax出错！");
                }

            });
        });

这样处理后，success中的第一个参数就是，javascript对象了。不需要手动解析（其实是间接地已经调用过了$.parsejson了）

第三种：在ajax请求的ashx文件设置：ContentType为”application/json”

  //第三种方法是在ashx文件中，修改报文头。。context.Response.ContentType = "application/json";
        $(function () {         
            $.ajax({
                type: "post", url: "jQueryAjaxTest.ashx",
                data: { i1: 10, i2: 30 },
                success: function (resTxt) {
                    for (var i = 0; i < resTxt.length; i++) {
                        alert(resTxt[i]);
                    }
                },
                error: function () {
                    alert("ajax出错！");
                }

            });
        });
        */