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 相关文章推荐
javascript 学习笔记(onchange等)
Nov 14 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
js命名空间写法示例
Dec 18 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
优秀的毕业生的自我评价
2013/12/12 职场文书
入学生会自荐书范文
2014/02/05 职场文书
工程建设实施方案
2014/03/14 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
优秀志愿者感言
2015/08/01 职场文书
办公室规章制度范本
2015/08/04 职场文书
分家协议书范本
2016/03/22 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python
Java界面编程实现界面跳转
2022/06/16 Java/Android