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学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 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
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
javascript div 弹出可拖动窗口
2009/02/26 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
五一劳动节活动记录
2014/03/23 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
企业理念标语
2014/06/09 职场文书
新闻编辑求职信
2014/07/13 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
酒店厨房管理制度
2015/08/06 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android