zoukankan      html  css  js  c++  java
  • ajax几种请求几种类型

    jquery向服务器发送一个ajax请求后,可以返回多种类型的数据格式,包括:html,xml,json,text等。

    首先说一下jquery中ajax标准的格式.

        $.ajax({
                    url: "/CommonService.asmx/SayHello",//ajax请求地址
                    type: "Post",//请求方式 分为get和post
                    dataType: "json", //要求请求返回数据类型 可分为json html text xml 等
                    contentType: "application/json; charset=utf-8", //发送服务器数据的编码方式
                    data: "{name:'Varchar32'}",//传送的数据
                    success: function (data) {//执行成功
    var result= data.responseText; alert(result.XXX); }, error: function (data) {//执行失败 //200的响应也有可能被认定为error,responseText中没有Message部分 alert($.parseJSON(data.responseText).Message); }, complete: function (data) { //不管成功还是失败后
    ;//after success or error } });


    下面是几种格式的例

    1.html格式的数据

    "<div class='comment'><h6> "+username+" :</h6><p class='para'> "+content+" </p></div>"

    服务器端返回数据格式是html片段,因此不需要经过处理就可以将新的html数据插入到主页面中,这种方法虽然简便,但是重用性不强。

    $.ajax({

       type:"POST",

       url:"Handler.ashx",

       dataType:html,

       data:{username:$("#name").val(),password:$("#pwd").val()},

       success:function(data){

        $("#result").html(data);

       }

    }

    2.XML格式的数据

    Response.Write("<?xml version=""1.0"" encoding=""utf-8""?>")
    Response.Write("<comments>")
    Response.Write("<comment username='"+username+"'>")
    Response.Write("<content>"+content+"</content>")
    Response.Write("</comment>")
    Response.Write("</comments>")

    Response.End();

    由于服务器端返回的数据格式是XML文档,因此需要对文档的数据进行处理。

    $.ajax({

       type:"POST",

       url:"Handler.ashx",

       dataType:xml,

       data:{username:$("#name").val(),password:$("#pwd").val()},

       success:function(data){

         var username = $(data).find("comment").attr("username");
         var content = $(data).find("comment content").text();
         var txtHtml = "<div class='comment'><h6>"+      username+":</h6><p class='para'>"+content+"</p></div>";
        
     $("#result").html(txtHtml)

       }

    }

    3.JSON格式的数据

    Response.Write("{ username : '"+username+"' , content : '"+content+"'}") 

    由于服务器端返回的数据格式是JSON文档,因此也需要对文档的数据进行处理,但是JSON文档比较XML文档更容易解析。

    $.ajax({

       type:"POST",

       url:"Handler.ashx",

       dataType:json,

       data:{username:$("#name").val(),password:$("#pwd").val()},

       success:function(data){

       可以加上.....

         var username = data.username;
         var content = data.content;
         var txtHtml = "<div class='comment'><h6>"+      username+":</h6><p class='para'>"+content+"</p></div>";
        
     $("#result").html(txtHtml)

       }

    }

    egg:实验

        <script type="text/javascript">
            $(function () {
                $.ajax({
                    type: "post",
                    url: "abc.aspx",
                    data: "{}",
                    contentType: "text/plain; charset=utf-8",
                    dataType: "text",
                    success: function (data) {
                        alert(data);
                    },
                    error: function (msg) {
                        alert(msg);
                    }
                });
            });
        </script>

    然后在aspx对应的页面.
     Response.Write("dongya");
            Response.End();

    然后运行就会执行.dongya那个弹框.

    下面是四个例子  实验过
    <script type="text/javascript"> $(function () { $.ajax({ type: "post", //以post方式传递 url: "a.ashx", //请求地址 // data: {}, //传递参数 这里不进行传递 // contentType: "text/plain; charset=utf-8", dataType: "json", //数据类型 success: function (data) { alert(data.a); //返回的是json对象,可以直接进行操作读取 }, error: function (msg) { alert(1); } });//对应第一个一般处理程序 $(function () { $.post('b.ashx', function (data, status) { if (status == 'success') {//当执行成功 alert(data.a); } else { alert("shibai"); } }, 'json');//对应第二个一般处理程序 }); $(function () { $.ajax( { url: "c.ashx", type: "post", dateType: "text", success: function (data) { alert(data); //先看看返回的类型是不是json字符串 // var i = eval("(" + data + ")");//把json字符串转换为json对象 var i = JSON.parse(data); //把json字符串转换为json对象 alert(i);//json对象是object类型 alert(i.a); }, error: function () { } } ); }); //对应第三个一般处理程序 $(function () { $.ajax( { url: "d.ashx", type: "post", dateType: "text", success: function (data) { alert(data);//返回字符串类型 }, error: function () { } }); });//对应第四个一般处理程序 </script> 第一个一般处理程序 对应第一个js <%@ WebHandler Language="C#" Class="a" %> using System; using System.Web; using System.Runtime.Serialization; public class a : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "json"; string json = "{"a":"123"}"; // "雙引號 轉義符 通過轉義符這樣就變成了合格的ojson字符串 //string str = "{name:cxh,sex:man}";//這樣是平常罛的字符串 //var str1 = {"name":"cxh","sex":"man" };//這樣是正規的ojson對象 //var str2='{"name":"cxh","sex":"man"}';// 這樣是正規的ojson字符串 context.Response.Write(json.ToString()); } public bool IsReusable { get { return false; } } } 東亞 09:31:16 第二个一般处理程序 对应第二个js <%@ WebHandler Language="C#" Class="b" %> using System; using System.Web; public class b : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "json"; string json = "{"a":"123"}"; context.Response.Write(json.ToString()); } public bool IsReusable { get { return false; } } } 東亞 09:31:23 第三个一般处理程序 对应第三个js <%@ WebHandler Language="C#" Class="c" %> using System; using System.Web; using System.Web.Script.Serialization; using System.Runtime.Serialization.Json; public class c : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; string b = "{"a":"123"}";//這是合格的ojosn字符串 context.Response.Write(b.ToString()); } public bool IsReusable { get { return false; } } } 東亞 09:31:30 第四个一般处理程序 对应第四个js <%@ WebHandler Language="C#" Class="d" %> using System; using System.Web; public class d : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Write("Hello World"); } public bool IsReusable { get { return false; } } }


  • 相关阅读:
    HTML: vertical algin Big/small div in same row (bootstrap)
    unix时间转换
    chrome工具分析
    DNF 包管理器
    安装nodejs
    location属性解释
    angular深入理解途径
    ui-router与ngRoute
    angular $location服务获取url
    Python文件操作
  • 原文地址:https://www.cnblogs.com/sdya/p/4121067.html
Copyright © 2011-2022 走看看