asp.net+ajax的Post请求实例

  本文实例讲述了asp.net+ajax的Post请求的实现方法。分享给大家供大家参考。具体如下:

  

复制代码 代码如下:
//一个ajax的Post请求

  function submitInfo() {

  $(".warn").hide(); //刚提交的时候隐藏错误的信息

  var data = $("#formData").serialize(); //将表单的数据通过序列化表单值,创建 URL 编码文本字符串。形成一个表单元素集合的 jQuery 对象

  $.post("/login/checkLoginInfo", data, function (ajaxObj) { //将数据提交到login控制器下的CheckLOginInfo方法。参数是data。  如果请求成功,function就是请求成功时执行的回调函数。ajaxObj是checkLoginInfo方法的返回数据

  //回传内容{status: 1(success)/0(fail),}

  if (ajaxObj.status == 0 || status == null) { //如果返回状态为0或者为null

  $(".warn").show(); //将错误信息显示出来

  } else {

  //登陆成功,跳转都制定页面

  window.location = '/HotelList/Index';

  }

  }, "json");

  }

  注意这条语句的参数,与回调函数 loginFinish 与上面条$.Post()请求的区别

  

复制代码 代码如下:
$.post("/ajax/UserLogin.ashx",

  { "username": username, "password": password },

  loginFinish);

  

复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">

  <head runat="server">

  <title></title>

  <link href="/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />

  <script src="/js/jquery-1.4.2.js" type="text/javascript"></script>

  <script src="/js/jquery-ui-1.8.2.custom.js" type="text/javascript"></script>

  <script type="text/javascript">

  //向服务器请求当前登录状态,然后切换登录区域的显示

  var checkLogin = function () {

  $.post("/ajax/CheckLogin.ashx", function (data) {

  var strs = data.split("|");

  if (strs[0] == "no") {

  //alert("木有登陆");

  $("#divLoginArea").show(); //如果没有登陆就显示"登陆"

  $("#divLoginOutArea").hide(); //隐藏"注销"

  }

  else {

  //切换“登录”、“注销”的两个层

  $("#divLoginArea").hide(); //隐藏"登陆"

  $("#divLoginOutArea").show(); //显示 "注销"

  $("#spanUserName").text(strs[1]);//把当前登录用户名显示出来

  }

  });

  }

  var loginFinish = function (data) {  //这是一个回调函数

  if (data == "ok") {

  //alert("成功");

  $("#divLogin").dialog("close"); //登录成功关闭窗口

  checkLogin();//登录成功,刷新登录区域的显示

  }

  else {

  alert("用户名密码错误");

  }

  };

  $(function () {

  $("#btnShowLoginDlg").click(function () {

  $("#divLogin").dialog({

  height: 200,

  modal: true

  });

  });

  $("#btnLogin").click(function () {  //当用户点击"登陆" 控件触发事件

  //todo:检验用户名、密码不能为空

  var username = $("#txtUserName").val();

  var password = $("#txtPwd").val();

  $.post("/ajax/UserLogin.ashx",//----------------------请关注这条$.Post()请求的参数与回调函数

  { "username": username, "password": password },

  loginFinish);

  });

  });

  $(function () {

  checkLogin();//刚进入页面的时候也是先向服务器查询当前登录状态

  $("#btnLogout").click(function () {

  $.post("/ajax/Logout.ashx", function () {

  checkLogin();//刷新显示

  });

  });

  });

  </script>

  <asp:ContentPlaceHolder ID="head" runat="server">

  </asp:ContentPlaceHolder>

  </head>

  <body>

  <form id="form1" runat="server">

  <div>

  <div id="divLoginArea" style="display:none"><input type="button" value="登录" id="btnShowLoginDlg" /></div>

  <div id="divLoginOutArea" style="display:none">

  <span id="spanUserName"></span>

  <input type="button" value="注销" id="btnLogout" />

  </div>

  <div id="divLogin" title="登录窗口"  style="display:none">

  <table>

  <tr><td>用户名:</td><td><input type="text"  id="txtUserName"/></td></tr>

  <tr><td>密码:</td><td><input type="password"  id="txtPwd"/></td></tr>

  <tr><td colspan="2"><input type="button" value="登录" id="btnLogin" /></td></tr>

  </table>

  </div>

  <br />

  <asp:ContentPlaceHolder ID="placeHolderMain" runat="server">

  </asp:ContentPlaceHolder>

  <br />

  尾部<br />

  </div>

  </form>

  </body>

  </html>

  希望本文所述对大家的asp.net程序设计有所帮助。