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.ajax向后台传递数组问题的解决方法
May 12 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 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中header函数的用法及其注意事项详解
2016/06/13 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
javascript Excel操作知识点
2009/04/24 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
Python中的map、reduce和filter浅析
2014/04/26 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
最新党员思想汇报
2014/01/01 职场文书
大学生求职信范文
2014/05/24 职场文书
完整版商业计划书
2014/09/15 职场文书
优秀班组事迹材料
2014/12/24 职场文书
生产实习心得体会范文
2016/01/22 职场文书
mysql配置SSL证书登录的实现
2021/09/04 MySQL
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
Java中API的使用方法详情
2022/04/06 Java/Android
Python中npy和mat文件的保存与读取
2022/04/24 Python