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>