jQuery实现form表单基于ajax无刷新提交方法详解


Posted in Javascript onDecember 08, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 #Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 #Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 #Javascript
JS获取文件大小方法小结
Dec 08 #Javascript
js+ajax实现获取文件大小的方法
Dec 08 #Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 #Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 #Javascript
You might like
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
聊天室php&amp;mysql(三)
2006/10/09 PHP
php模板函数 正则实现代码
2012/10/15 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
python实现的生成word文档功能示例
2019/08/23 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
python中for in的用法详解
2020/04/17 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
python代码实现图书管理系统
2020/11/30 Python
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
七年级历史教学反思
2014/02/05 职场文书
上班看电影检讨书
2014/02/12 职场文书
简单租房协议书范本
2014/08/20 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
大学生活感想
2015/08/10 职场文书
Spring中的@Transactional的工作原理
2022/06/05 Java/Android