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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
BACKBONE.JS 简单入门范例
Oct 17 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
vue实现页面切换滑动效果
Jun 29 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 foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
PHP的PSR规范中文版
2013/09/28 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
Python文件及目录操作实例详解
2015/06/04 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
python 中如何获取列表的索引
2019/07/02 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
JAVA代码查错题
2014/10/10 面试题
linux下进程间通信的方式
2014/12/23 面试题
社区工作者先进事迹
2014/01/18 职场文书
小学生检讨书大全
2014/02/06 职场文书
村党支部换届选举方案
2014/05/02 职场文书
政治学求职信
2014/06/03 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
小学班主任经验交流材料
2014/12/16 职场文书