jQuery实现form表单基于ajax无刷新提交方法实例代码


Posted in jQuery onNovember 04, 2019

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法。分享给大家供大家参考,具体如下:

首先,新建Login.html页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>$.ajax()方法发送请求</title>
 <script type="text/javascript" src="js/jquery-1.4.1.js"></script>
 <style type="text/css">
 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;
 }
 </style>
 <script type="text/javascript">
 $(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);
   }
   }
  })
  })
 })
 </script>
</head>
<body>
 <form id="frmUserLogin">
 <div class="divFrame">
 <div class="divTitle">
  <span>用户登录</span>
 </div>
 <div class="divContent">
  <div class="clsShow">
  <div id="divError" class="clsError">
  </div>
  <div>
   名称:<input id="txtName" type="text" class="txt" /></div>
  <div>
   密码:<input id="txtPass" type="password" class="txt" /></div>
  <div>
   <input id="btnLogin" type="button" value="登录" class="btn" /> 
   <input id="btnReset" type="reset" value="取消" class="btn" />
  </div>
  </div>
 </div>
 </div>
 </form>
</body>
</html>

然后,新建Login.aspx,接收并处理数据:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="JSDemo.Login" ResponseEncoding="gb2312"%>
<%
 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);
%>

补充:form使用AJAX提交完整实例:

//将form转换为AJAX提交
 function ajaxSubmit(url,frm,fn){
 var dataPara=getFormJson(frm);
 $.ajax({
  url:url,
  type:"post",
  data:dataPara,
  async:false,
  dataType:'txt',
  success:fn
 });
 }
 //将form中的值转换为键值对
 function getFormJson(frm){
 var o={};
 var a=$(frm).serializeArray();
 $.each(a,function(){
  if(o[this.name]!==undefined){
  if(!o[this.name].push){
   o[this.name]=[o[this.name]];
  }
  o[this.name].push(this.value || '');
  }else{
  o[this.name]=this.value || '';
  }
 });
 return o;
 }
/*
 //前台调用方式
 function autoSubmitFun(){
  ajaxSubmit("autoSumitScoreAJAX.action",$('#formId'),function(){});
 }
*/

以上就是关于jQuery实现ajax无刷新提交的全部知识点,感谢大家的学习和对三水点靠木的支持。

jQuery 相关文章推荐
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 #jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 #jQuery
Javascript和jquery在selenium的使用过程
Oct 31 #jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 #jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 #jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 #jQuery
jquery实现购物车基本功能
Oct 25 #jQuery
You might like
PHP新手上路(十三)
2006/10/09 PHP
php Undefined index的问题
2009/06/01 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
PHP实现图片压缩
2020/09/09 PHP
jquery tab插件精简版分享
2011/09/10 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
Python列表生成器的循环技巧分享
2015/03/06 Python
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
python简单读取大文件的方法
2016/07/01 Python
Python创建xml文件示例
2017/03/22 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
python3 线性回归验证方法
2019/07/09 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
运动会加油稿20字
2014/11/15 职场文书
民事和解协议书格式
2014/11/29 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript