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

  • 相关阅读:
    第一遍机房收费系统总结
    HDU 4027 Can you answer these queries?(线段树)
    程序猿的路----程序猿一定要细致看
    让你提前认识软件开发(25):数据库简单介绍
    could not initialize proxy
    ios--uitextfield动态限制输入的字数(解决方式)
    Python 学习之二:Python超短教程
    【v2.x OGE教程 19】 引擎状态控制
    [MongoDB]count,gourp,distinct
    [MongoDB]增删改查
  • 原文地址:https://www.cnblogs.com/windy2008/p/1686293.html
Copyright © 2011-2022 走看看