asp.net+ajax的Post请求实例_asp.net教程-查字典教程网
asp.net+ajax的Post请求实例
asp.net+ajax的Post请求实例
发布时间:2016-12-29 来源:查字典编辑
摘要:本文实例讲述了asp.net+ajax的Post请求的实现方法。分享给大家供大家参考。具体如下:复制代码代码如下://一个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="http://www.jb51.netjs/jquery-1.4.2.js" type="text/javascript"></script>

<script src="http://www.jb51.netjs/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"><input type="button" value="登录" id="btnShowLoginDlg" /></div>

<div id="divLoginOutArea">

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

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

</div>

<div id="divLogin" title="登录窗口">

<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程序设计有所帮助。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新asp.net教程学习
    热门asp.net教程学习
    编程开发子分类