• JQuery以POST方法从ASP.NET服务器获取Json数据完整示例 .

    转自：http://blog.csdn.net/yangyuankp/article/details/7222366

         最近学习JQuery，用到了它的POST方法向服务器请求数据，服务器返回Json格式的数据。看上去非常简单，但出了很多莫名其妙的问题。主要原因就是第一次学习太生疏，很多地方写的不规范造成的。这方面的资料虽然可以从网上查到，但是百花齐放，怎么写的都有，在此，我就以标准的格式写一个例子，希望对大家有帮助，也给自己留着备用。

          本文适合有一定JQuery、ASP.NET基础的读者阅读。

          在写例子之前，还要啰嗦些重点内容：

          无论何种客户端，向服务器传递数据都有两种方式：GET方法和POST方法。GET方法传递的数据直接写在URL上，比如：http://www.kpdown.com/soft/download.asp?softid=805&downid=3&id=711这个请求就包含了三个参数。优点是使用方便，一目了然；缺点是传递的数据有限，而且不安全。而POST方法，则要通过特定的函数来执行，无论什么语言，无论什么函数，只要是POST，一般会有这几个参数：POST地址、POST数据、返回值（回调函数）、HTTP头信息、返回数据格式等。POST的优点是数据量大，安全。

          对于服务器端，以ASP.NET为例，如果想要得到GET方法传递过来的参数，可以用Request.QueryString[“参数名”]来获取；如果向得到POST方法传递过来的数据，可以用Request.Form[“参数名”]来获取。向客户端返回数据可以简单的用Response.Write()方法。

          对于Json，这是一种数据格式。能够方便快速的被解析，可以匹敌XML。网络上有很多关于它的知识，但是写法很不规范，很容易给初学者造成困惑，更严重的是造成程序莫名其妙的出错，最常见的错误：POST回调函数不执行。这个困扰了许多人的问题，一般都是由于Json数据格式不对造成的。在本例中会用最规范的方式展示如何使用Json数据。我在这贴一个简单易懂的图，相信理解能力强的看完图就不用看例子了。（具体关于Json的知识，请参阅权威网站：http://www.w3school.com.cn/json/index.asp）


          在本例中以HTML静态网页作为前台页面，不可以用.NET的aspx，因为我们的POST是从JavaScript中发出的，非ASP.NET自身发出，会被ASP.NET屏蔽，一定要注意。本例以ASP.NET的一般处理程序ashx作为服务器，在JavaScript中调用JQuery框架的POST方法，向服务器请求Json数据，并将请求到的Json数据解析，插入到HTML页面中。本例模拟了一个查询功能，输入正确的用户名、密码，即可获得所有员工的基本信息以及备注信息。展示了一个完整的HTML调用JQuery与ASP.NET服务器交互的例子。

     

    初始页面：

    输入正确页面：

    输入错误页面：

    HTML前台代码：

    [html] view plaincopyprint?
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5.     <title>服务器交互实例</title>  
    6.     <script src="js/jquery.js" type="text/javascript"></script>  
    7.     <script src="js/Verification.js" type="text/javascript"></script>  
    8. </head>  
    9.   
    10. <body>  
    11.     <div class="operater">  
    12.         <p>用户名：<input ID="txtUserName" type="text"></p>  
    13.         <p>密　码：<input ID="txtPassWord" type="text"></p>  
    14.              
    15.        <input ID="btnSubmit" type="button" value="提交">  
    16.              
    17.        <input ID="btnReset" type="button" value="重置">  
    18.     </div>  
    19.     <div>  
    20.         <h4>所有员工：</h4>  
    21.         <ul class="worker">  
    22.         </ul>  
    23.         <h4>备注信息：</h4>  
    24.         <ul class="remarksMessage">  
    25.         </ul>  
    26.     </div>    
    27. </body>  
    28. </html>  
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>服务器交互实例</title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/Verification.js" type="text/javascript"></script>
</head>

<body>
    <div class="operater">
        <p>用户名：<input ID="txtUserName" type="text"></p>
        <p>密　码：<input ID="txtPassWord" type="text"></p>
           
       <input ID="btnSubmit" type="button" value="提交">
           
       <input ID="btnReset" type="button" value="重置">
    </div>
    <div>
        <h4>所有员工：</h4>
        <ul class="worker">
        </ul>
        <h4>备注信息：</h4>
        <ul class="remarksMessage">
        </ul>
    </div>  
</body>
</html>


    JavaScript代码（Verification.js）：

    [javascript] view plaincopyprint?
    1. $(document).ready(function () {  
    2.     var txtUserName = $("#txtUserName"); //保存文本框对象，提高效率   
    3.     var txtPassWord = $("#txtPassWord");  
    4.   
    5.     //注册提交按钮单击事件   
    6.     $("#btnSubmit").click(function () {  
    7.         if ("" != txtUserName.val() && "" != txtPassWord.val()) { //简单的验证放在客户端，减少服务器压力   
    8.             //利用post方式向服务器请求数据   
    9.             $.post("getUserMessage.ashx?t=" + Math.random(), { userName: txtUserName.val(), userPassWord: txtPassWord.val() }, function (json) {  
    10.                 if (json) {  
    11.                     if (0 != json.worker.length) {  
    12.                         $(".worker li").remove(); //移除所有员工列表下的li标记   
    13.                         //遍历json中的worker数组，获取所有员工   
    14.                         for (var i = 0; i < json.worker.length; i++) {  
    15.                             $("<li>姓名：" + json.worker[i].name + ",性别：" + json.worker[i].sex + ",年龄：" + json.worker[i].age + "</li>").appendTo(".worker"); //从json中读取数据，构造一个li标签，插入到ul标签中   
    16.                         }  
    17.                     } else {  
    18.                         $(".worker li").remove();  
    19.                         $("<li>暂无数据或验证失败！</li>").appendTo(".worker");  
    20.                     }  
    21.                     if (0 != json.remarksMessage.length) {  
    22.                         $(".remarksMessage li").remove();  
    23.                         //遍历json中的remarksMessage数组，获取备注信息   
    24.                         for (var i = 0; i < json.remarksMessage.length; i++) {  
    25.                             $("<li>" + json.remarksMessage[i].remarks + "</li>").appendTo(".remarksMessage");  
    26.                         }  
    27.                     } else {  
    28.                         $(".remarksMessage li").remove();  
    29.                         $("<li>暂无数据或验证失败！</li>").appendTo(".remarksMessage");  
    30.                     }  
    31.                 } else {  
    32.                     $("li").remove();  
    33.                     $("<li>暂无数据或验证失败！</li>").appendTo(".worker");  
    34.                     $("<li>暂无数据或验证失败！</li>").appendTo(".remarksMessage");  
    35.                 }  
    36.   
    37.             }, "json");  
    38.         } else {  
    39.             alert("输入非法！");  
    40.         }  
    41.     });  
    42.   
    43.     //注册重置按钮单击事件   
    44.     $("#btnReset").click(function () {  
    45.         txtUserName.val("");  
    46.         txtPassWord.val("");  
    47.     });  
    48. });  
    $(document).ready(function () {
    var txtUserName = $("#txtUserName"); //保存文本框对象，提高效率
    var txtPassWord = $("#txtPassWord");

    //注册提交按钮单击事件
    $("#btnSubmit").click(function () {
        if ("" != txtUserName.val() && "" != txtPassWord.val()) { //简单的验证放在客户端，减少服务器压力
            //利用post方式向服务器请求数据
            $.post("getUserMessage.ashx?t=" + Math.random(), { userName: txtUserName.val(), userPassWord: txtPassWord.val() }, function (json) {
                if (json) {
                    if (0 != json.worker.length) {
                        $(".worker li").remove(); //移除所有员工列表下的li标记
                        //遍历json中的worker数组，获取所有员工
                        for (var i = 0; i < json.worker.length; i++) {
                            $("<li>姓名：" + json.worker[i].name + ",性别：" + json.worker[i].sex + ",年龄：" + json.worker[i].age + "</li>").appendTo(".worker"); //从json中读取数据，构造一个li标签，插入到ul标签中
                        }
                    } else {
                        $(".worker li").remove();
                        $("<li>暂无数据或验证失败！</li>").appendTo(".worker");
                    }
                    if (0 != json.remarksMessage.length) {
                        $(".remarksMessage li").remove();
                        //遍历json中的remarksMessage数组，获取备注信息
                        for (var i = 0; i < json.remarksMessage.length; i++) {
                            $("<li>" + json.remarksMessage[i].remarks + "</li>").appendTo(".remarksMessage");
                        }
                    } else {
                        $(".remarksMessage li").remove();
                        $("<li>暂无数据或验证失败！</li>").appendTo(".remarksMessage");
                    }
                } else {
                    $("li").remove();
                    $("<li>暂无数据或验证失败！</li>").appendTo(".worker");
                    $("<li>暂无数据或验证失败！</li>").appendTo(".remarksMessage");
                }

            }, "json");
        } else {
            alert("输入非法！");
        }
    });

    //注册重置按钮单击事件
    $("#btnReset").click(function () {
        txtUserName.val("");
        txtPassWord.val("");
    });
});


    服务器代码（getUserMessage.ashx）：

    [csharp] view plaincopyprint?
      1. <%@ WebHandler Language="C#" Class="getUserMessage" %>  
      2.   
      3. using System;  
      4. using System.Web;  
      5.   
      6. public class getUserMessage : IHttpHandler {  
      7.       
      8.     public void ProcessRequest (HttpContext context) {  
      9.         //获取GET方法传递参数：Request.QueryString["参数名称"];   
      10.         //获取POST方法传递参数：Request.Form["参数名称"];   
      11.         //本例使用的POST方法   
      12.         context.Response.ContentType = "application/json"; //指定返回数据格式为json   
      13.         string userName = context.Request.Form["userName"]; //读取post过来的数据   
      14.         string userPassWord = context.Request.Form["userPassWord"];  
      15.         string jsonResult=null;  
      16.   
      17.         if ("admin" == userName && "123" == userPassWord)  
      18.         {  
      19.             //json数据标准格式   
      20.             jsonResult = "{\"worker\":" +  
      21.                      "[" +  
      22.                      "{\"name\":\"张三\",\"sex\":\"男\",\"age\":\"25\"}," +  
      23.                      "{\"name\":\"李四\",\"sex\":\"女\",\"age\":\"21\"}," +  
      24.                      "{\"name\":\"王五\",\"sex\":\"男\",\"age\":\"27\"}" +  
      25.                      "]," +  
      26.                      "\"remarksMessage\":" +  
      27.                      "[" +  
      28.                      "{\"remarks\":\"普通员工\"}" +  
      29.                      "]}";  
      30.         }  
      31.         context.Response.Write(jsonResult);//向客户端返回数据   
      32.         context.Response.End();  
      33.     }  
      34.    
      35.     public bool IsReusable {  
      36.         get {  
      37.             return false;  
      38.         }  
      39.     }  
      40.   
      41. }  
  • 相关阅读:
    「SHOI2015」脑洞治疗仪
    LOJ 数列分块入门 8
    CF932F Escape Through Leaf
    NOIP2021游记总结
    [HEOI2016/TJOI2016]序列
    【模板】动态树（Link Cut Tree）
    LG P2839 [国家集训队]middle
    JZOJ 7377.欢乐豆
    JZOJ 7392. 【2021.11.17NOIP提高组联考】数 (ds)
    LOJ 数列分块入门 6
  • 原文地址：https://www.cnblogs.com/rambo1293271398/p/2774995.html
Copyright © 2020-2023  润新知