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 相关文章推荐
js event事件的传递与冒泡处理
Dec 06 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
JS实现图片切换特效
Dec 23 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
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通过cookies获取远程网页的指定代码
2013/06/25 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
Python版的文曲星猜数字游戏代码
2013/09/02 Python
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
python 对key为时间的dict排序方法
2018/10/17 Python
高分子材料与工程专业推荐信
2013/12/01 职场文书
土建资料员岗位职责
2014/01/04 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
班委竞选演讲稿
2014/04/28 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
2019经典广告词集锦!
2019/07/02 职场文书