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实现前端分页功能
Mar 23 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 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 读取文件的正确方法
2009/04/29 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
JQuery index()方法使用代码
2010/06/02 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
python 调用有道api接口的方法
2019/01/03 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
Python requests获取网页常用方法解析
2020/02/20 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
计算机应用专业毕业生求职信
2013/10/24 职场文书
化学教师自荐信范文
2013/12/28 职场文书
社区端午节活动方案
2014/01/28 职场文书
产品质量承诺书范文
2014/03/27 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
校园之声广播稿
2015/08/18 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS