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脚本代码跑起来。
Jan 09 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 Javascript
vue动态设置路由权限的主要思路
Jan 13 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实现mysql数据库备份类
2008/03/20 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
PHP7新功能总结
2019/04/14 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
JavaScript中Function详解
2015/02/27 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
python中的协程深入理解
2019/06/10 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
自我评价范文点评
2013/12/04 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
优秀实习生感言
2014/03/01 职场文书
保护动物的标语
2014/06/11 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
小平您好观后感
2015/06/09 职场文书
商场广播稿范文
2015/08/19 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
Django显示可视化图表的实践
2021/05/10 Python
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS