html ajax提交表单实例,jQuery使用$.ajax提交表单完整实例
本文实例讲述了jQuery使用$.ajax提交表单的方法。分享给大家供大家参考,具体如下:
首先,新建Login.html页面:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
$.ajax()方法发送请求
body
{
font-size: 13px;
}
.divFrame
{
width: 225px;
border: solid 1px #666;
}
.divFrame .divTitle
{
padding: 5px;
background-color: #eee;
height: 23px;
}
.divFrame .divTitle span
{
float: left;
padding: 2px;
padding-top: 5px;
}
.divFrame .divContent
{
padding: 8px;
text-align: center;
}
.divFrame .divContent .clsShow
{
font-size: 14px;
line-height: 2.0em;
}
.divFrame .divContent .clsShow .clsError
{
font-size: 13px;
border: solid 1px #cc3300;
padding: 2px;
display: none;
margin-bottom: 5px;
background-color: #ffe0a3;
}
.txt
{
border: #666 1px solid;
padding: 2px;
width: 150px;
margin-right: 3px;
}
.btn
{
border: #666 1px solid;
padding: 2px;
width: 50px;
}
$(function () {
$("#txtName").focus();//输入焦点
$("#txtName").keydown(function (event) {
if (event.which == "13") {//回车键,移动光标到密码框
$("#txtPass").focus();
}
});
$("#txtPass").keydown(function (event) {
if (event.which == "13") {//回车键,用.ajax提交表单
$("#btnLogin").trigger("click");
}
});
$("#btnLogin").click(function () { //“登录”按钮单击事件
//获取用户名称
var strTxtName = encodeURI($("#txtName").val());
//获取输入密码
var strTxtPass = encodeURI($("#txtPass").val());
//开始发送数据
$.ajax
({ //请求登录处理页
url: "Login.aspx", //登录处理页
dataType: "html",
//传送请求数据
data: { txtName: strTxtName, txtPass: strTxtPass },
success: function (strValue) { //登录成功后返回的数据
//根据返回值进行状态显示
if (strValue == "True") {//注意是True,不是true
$(".clsShow").html("操作提示,登录成功!" + strValue);
}
else {
$("#divError").show().html("用户名或密码错误!" + strValue);
}
}
})
})
})
用户登录
名称:
密码:
 
然后,新建Login.aspx,接收并处理数据:
string strName = System.Web.HttpUtility.UrlDecode(Request["txtName"]);
string strPass = System.Web.HttpUtility.UrlDecode(Request["txtPass"]);
bool login = false;
if (strName == "admin" && strPass == "admin")
{
login = true;
}
Response.Write(login);
%>
希望本文所述对大家jQuery程序设计有所帮助。
html ajax提交表单实例,jQuery使用$.ajax提交表单完整实例相关推荐
- ajax提交时页面转圈,jquery的ajax提交时loading提示的处理方法
方法1:使用ajaxStart方法定义一个全局的"加载中..."提示 $(function(){ $("#loading").ajaxStart(functio ...
- .net mvc ajax重定向,如何在MVC3 JQuery的Ajax调用重定向到新的页面(连同模型)(How to redirec...
我已经忘记密码页面,当用户输入用户名并点击"验证"按钮来检查他是在哪个组的基础上,我们需要显示不同的局部视图(现在让我们说,这是电话号码)的组这一页. 填写有效信息后, 成功我会重 ...
- ajax没返回响应数据,jQuery的Ajax时无响应数据的解决方法
jQuery的Ajax时无响应数据的解决方法 复制代码 代码如下: $.ajax( { type: "POST", url: "/MemberComment.aspx/G ...
- 火狐浏览器允许ajax,解决火狐浏览器发送jquery的ajax请求无效的问题
今天遇到这样一个问题: 页面在chrome下发送ajax的请求是没有问题的,但是在firfox下无效. 代码大致如下: //前面省略 ..... 生成成绩 查询成绩 ...... ...... fun ...
- ajax type是get请求,jQuery的Ajax请求数据时type无法使用GET
写一个ASP.NET MVC例子,它是使用jQuery的$.Ajax来呼叫控制器的数据. 创建一个视图: 运行结果: 一切正常,但是本例子我们只是获取数据,并没有做任何数据POST上传至控制器,我们尝 ...
- ajax静态加载图片,JQuery实现Ajax加载图片的方法
本文实例讲述了JQuery实现Ajax加载图片的方法.分享给大家供大家参考,具体如下: 最近在学习JQuery,想从原理上模拟一下无刷新的相册浏览. 最先想到的思路是利用缓存,也就是先显示提示消息,然 ...
- jq ajax同步异步,详解JQuery中Ajax的同步与异步
说到ajax同步与异步,可能很多同学对它都不是很了解,接下来我们就Ajax的同步与异步作个简单的介绍.同步:提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事.异步 ...
- 基于jquery的ajax聊天室系统,基于jQuery的Ajax聊天室应用毕业设计(含外文翻译)...
基于jQuery的Ajax聊天室应用毕业设计(含外文翻译) 毕业设计(论文) I 基于基于 jQuery 的的 Ajax 聊天室应用聊天室应用 摘摘 要要 随着网络的逐渐普及,以及网络技术的不断发展, ...
- php中jquery ajax请求参数,浅谈Jquery中Ajax异步请求中的async参数的作用
之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html asy.js function testAsync{ var temp; $.ajax( ...
最新文章
- 协方差及PCA降维计算
- 卷积神经网络(CNN)_相关知识
- os.path.join的妙用
- linux权限c是什么意思,linux服务器下权限设置
- @ Before,@ BeforeClass,@ BeforeEach和@BeforeAll之间的区别
- C++类复制构造函数
- 最强大脑-高效记忆方法
- nginx配置lua脚本
- Java 100以内的质数
- Batch Normalization论文翻译——中英文对照
- 【MTK Front Camera Bringup】
- 通达云OA被阿里云列为企业办公首推应用
- MacW资讯:开启Mac的壁纸自动更换功能
- 计算机实用教程pdf,计算机基础实用教程电子版.pdf
- 利用PowerQuery 快速进行限定时间表创建
- read by other session的优化记录
- php中文网的网址是多少,网站域名是什么
- 色拉英语第3集第2幕: what do yo do ?
- MacBook 更改蓝牙键盘键位
- 3DMax导出模型透明解决方案
热门文章
- C++之运算符重载(前置++和后置++)
- Flink SQL 功能解密系列 —— 流式 TopN 挑战与实现
- 云资源管理有助于减少服务滥用和开支
- bzoj 2631: tree
- nagios(icinga)借助check_hp插件监控惠普服务器硬件信息
- php获取excel表格中数据的小方法
- 路由器用PPP0E上网
- 计算机丢失i4m.dll,ntd.dll难住机器人发烧友
- 二维随机变量期望公式_概率论笔记-Ch4期望与方差
- python避坑指南_Linux下Python3.6的安装及避坑指南