Jquery Ajax学习实例2向页面发出请求,返回JSon格式数据

一、AjaxJson.aspx

  处理业务数据,产生JSon数据,供JqueryRequest.aspx调用,代码如下:

protected void Page_Load(object sender, EventArgs e)
    {
        string u = Request["UserName"];
        string p = Request["Password"];
        string output = string.Format("'UserName':'{0}','Password':'{1}'", u, p);

        Response.Write("[{");
        Response.Write(output);
        Response.Write("}]");
        Response.End();
    }

二、JqueryRequest.aspx
  通过点击按钮来请求AjaxJson.aspx,获取JSon数据。代码如下:

  

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" language="javascript" src="js/jquery-1.3.2.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" name="Text1" id="Text1"/><br />
        <input type="text" name="Text2" id="Text2"/>
        <br />
        <input type="button" id="btn1" onclick="BtnClick()" />
    </div>
    <div id="dd">
        sd
    </div>
    <div>
        <script type="text/javascript" language="javascript">
            function BtnClick() {
                var uid = $("#Text1").val();
                var pwd = $("#Text2").val();

                $.ajax({
                    url: "AjaxJson.aspx",
                    type: "POST",
                    data: { UserName: uid, Password: pwd },
                    success: function(data) {
                        var json = eval(data); //eval("(" + data + ")");

                        $.each(json, function(idx, item) {
                            var user = item.UserName;
                            var pass = item.Password;
                            $("#dd").html("<h1>用户名:" + user + "  密码:" + pass + "</h1>");
                        });
                    }
                });
            }
        </script>
    </div>
    </form>
</body>
</html>

出处: http://www.cnblogs.com/windy2008

原文地址:https://www.cnblogs.com/windy2008/p/1686293.html