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图片懒加载 lazyload.js使用方法
Aug 16 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
jQuery实现购物车全功能
Jan 11 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 调用远程url的六种方法小结
2009/11/02 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
Vue精简版风格概述
2018/01/30 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
MVVM框架下实现分页功能示例
2018/06/14 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
详解js常用分割取字符串的方法
2019/05/15 Javascript
npm的lock机制解析
2019/06/20 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
Python 通过URL打开图片实例详解
2017/06/01 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
大专会计自我鉴定
2014/02/06 职场文书
企业军训感言
2014/02/08 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
介绍长城的导游词
2015/01/30 职场文书
质检员岗位职责
2015/02/03 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
行政二审代理词
2015/05/25 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL