本文实例讲述了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);

}

}

})

})

})

用户登录

名称:

密码:

&nbsp

然后,新建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提交表单完整实例相关推荐

  1. ajax提交时页面转圈,jquery的ajax提交时loading提示的处理方法

    方法1:使用ajaxStart方法定义一个全局的"加载中..."提示 $(function(){ $("#loading").ajaxStart(functio ...

  2. .net mvc ajax重定向,如何在MVC3 JQuery的Ajax调用重定向到新的页面(连同模型)(How to redirec...

    我已经忘记密码页面,当用户输入用户名并点击"验证"按钮来检查他是在哪个组的基础上,我们需要显示不同的局部视图(现在让我们说,这是电话号码)的组这一页. 填写有效信息后, 成功我会重 ...

  3. ajax没返回响应数据,jQuery的Ajax时无响应数据的解决方法

    jQuery的Ajax时无响应数据的解决方法 复制代码 代码如下: $.ajax( { type: "POST", url: "/MemberComment.aspx/G ...

  4. 火狐浏览器允许ajax,解决火狐浏览器发送jquery的ajax请求无效的问题

    今天遇到这样一个问题: 页面在chrome下发送ajax的请求是没有问题的,但是在firfox下无效. 代码大致如下: //前面省略 ..... 生成成绩 查询成绩 ...... ...... fun ...

  5. ajax type是get请求,jQuery的Ajax请求数据时type无法使用GET

    写一个ASP.NET MVC例子,它是使用jQuery的$.Ajax来呼叫控制器的数据. 创建一个视图: 运行结果: 一切正常,但是本例子我们只是获取数据,并没有做任何数据POST上传至控制器,我们尝 ...

  6. ajax静态加载图片,JQuery实现Ajax加载图片的方法

    本文实例讲述了JQuery实现Ajax加载图片的方法.分享给大家供大家参考,具体如下: 最近在学习JQuery,想从原理上模拟一下无刷新的相册浏览. 最先想到的思路是利用缓存,也就是先显示提示消息,然 ...

  7. jq ajax同步异步,详解JQuery中Ajax的同步与异步

    说到ajax同步与异步,可能很多同学对它都不是很了解,接下来我们就Ajax的同步与异步作个简单的介绍.同步:提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事.异步 ...

  8. 基于jquery的ajax聊天室系统,基于jQuery的Ajax聊天室应用毕业设计(含外文翻译)...

    基于jQuery的Ajax聊天室应用毕业设计(含外文翻译) 毕业设计(论文) I 基于基于 jQuery 的的 Ajax 聊天室应用聊天室应用 摘摘 要要 随着网络的逐渐普及,以及网络技术的不断发展, ...

  9. php中jquery ajax请求参数,浅谈Jquery中Ajax异步请求中的async参数的作用

    之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html asy.js function testAsync{ var temp; $.ajax( ...

最新文章

  1. 协方差及PCA降维计算
  2. 卷积神经网络(CNN)_相关知识
  3. os.path.join的妙用
  4. linux权限c是什么意思,linux服务器下权限设置
  5. @ Before,@ BeforeClass,@ BeforeEach和@BeforeAll之间的区别
  6. C++类复制构造函数
  7. 最强大脑-高效记忆方法
  8. nginx配置lua脚本
  9. Java 100以内的质数
  10. Batch Normalization论文翻译——中英文对照
  11. 【MTK Front Camera Bringup】
  12. 通达云OA被阿里云列为企业办公首推应用
  13. MacW资讯:开启Mac的壁纸自动更换功能
  14. 计算机实用教程pdf,计算机基础实用教程电子版.pdf
  15. 利用PowerQuery 快速进行限定时间表创建
  16. read by other session的优化记录
  17. php中文网的网址是多少,网站域名是什么
  18. 色拉英语第3集第2幕: what do yo do ?
  19. MacBook 更改蓝牙键盘键位
  20. 3DMax导出模型透明解决方案

热门文章

  1. C++之运算符重载(前置++和后置++)
  2. Flink SQL 功能解密系列 —— 流式 TopN 挑战与实现
  3. 云资源管理有助于减少服务滥用和开支
  4. bzoj 2631: tree
  5. nagios(icinga)借助check_hp插件监控惠普服务器硬件信息
  6. php获取excel表格中数据的小方法
  7. 路由器用PPP0E上网
  8. 计算机丢失i4m.dll,ntd.dll难住机器人发烧友
  9. 二维随机变量期望公式_概率论笔记-Ch4期望与方差
  10. python避坑指南_Linux下Python3.6的安装及避坑指南