asp.net+ajax的Post请求实例
更新时间:2021年9月22日 10:11 点击:2164
本文实例讲述了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");
}
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);
{ "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>
<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程序设计有所帮助。
相关文章
- 这篇文章主要为大家详细介绍了ASP.NET购物车的实现过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
- 在开发过程中,使用Visual Studio的断点调试功能可以很方便帮我们调试发现程序存在的错误,同样Visual Studio也支持对SQL Server里面的存储过程进行调试,下面就让我们看看具体的调试方法。...2021-09-22
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这篇文章主要为大家详细介绍了jquery Ajax实现Select动态添加数据的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-06-15
ASP.NET Core根据环境变量支持多个 appsettings.json配置文件
这篇文章主要介绍了ASP.NET Core根据环境变量支持多个 appsettings.json配置文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22- 这篇文章主要介绍了记一次EFCore类型转换错误及解决方案,帮助大家更好的理解和学习使用asp.net core,感兴趣的朋友可以了解下...2021-09-22
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
这篇文章主要介绍了JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法,涉及JavaScript页面元素定时滚动操作及ajax调用实现技巧,需要的朋友可以参考下...2016-04-19- 这篇文章主要介绍了jQuery+ajax简单实现文件上传的方法,结合实例形式简单分析了jQuery基于ajax的post方法进行文件传输及asp.net后台处理技巧,需要的朋友可以参考下...2016-06-12
- 这篇文章主要为大家详细介绍了js实现ajax的用户简单登入功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-19
详解ASP.NET Core 中基于工厂的中间件激活的实现方法
这篇文章主要介绍了ASP.NET Core 中基于工厂的中间件激活的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-22- 今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果。用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上。...2015-03-15
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
这篇文章主要介绍了Bootstrap进度条与AJAX后端数据传递结合使用,需要的朋友可以参考下...2017-04-27ASP.NET 2.0中的数据操作:使用两个DropDownList过滤的主/从报表
在前面的指南中我们研究了如何显示一个简单的主/从报表, 该报表使用DropDownList和GridView控件, DropDownList填充类别,GridView显示选定类别的产品. 这类报表用于显示具有...2016-05-19- 这篇文章主要为大家详细介绍了jQuery UI结合Ajax创建可定制的Web界面,如何利用Ajax和jQuery UI创建具有各种定制功能的高度可定制的UI,感兴趣的小伙伴们可以参考一下...2016-06-24
asp.net通过消息队列处理高并发请求(以抢小米手机为例)
这篇文章主要介绍了asp.net通过消息队列处理高并发请求(以抢小米手机为例),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22- 下面想就为大家带来一篇jquery ajax局部加载方法详解(实现代码)。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧...2016-05-14
ASP.NET单选按钮控件RadioButton常用属性和方法介绍
RadioButton又称单选按钮,其在工具箱中的图标为 ,单选按钮通常成组出现,用于提供两个或多个互斥选项,即在一组单选钮中只能选择一个...2021-09-22- 这篇文章主要介绍了jQuery中通过ajax的get()函数读取页面的方法,需要的朋友可以参考下...2016-03-01
- 这篇文章主要为大家详细介绍了jquery+Ajax实现简单分页条效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-17
ASP.NET中iframe框架点击左边页面链接 右边显示链接页面内容
这篇文章主要介绍了ASP.NET中iframe框架点击左边页面链接,右边显示链接页面内容的实现代码,感兴趣的小伙伴们可以参考一下...2021-09-22