zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    mysql两种重要的引擎
    mysql常用代码
    ubuntu常用基本命令
    redis缓存服务器
    memcached缓存服务器
    glusterfs分布式文件服务器
    keepalived双机热备(nginx+mysql)
    nginx负载均衡mysql数据库
    heartbeat双机热备(haproxy或glbd+mysql)
    haproxy负载均衡mysql
  • 原文地址:https://www.cnblogs.com/windy2008/p/1686293.html
Copyright © 2011-2022 走看看