jQuery实现form表单基于ajax无刷新提交方法实例代码


Posted in jQuery onNovember 04, 2019

本文实例讲述了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实现ajax无刷新提交的全部知识点,感谢大家的学习和对三水点靠木的支持。

jQuery 相关文章推荐
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jquery实现广告上下滚动效果
Mar 04 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 #jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 #jQuery
Javascript和jquery在selenium的使用过程
Oct 31 #jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 #jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 #jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 #jQuery
jquery实现购物车基本功能
Oct 25 #jQuery
You might like
Oracle Faq(Oracle的版本)
2006/10/09 PHP
随机头像PHP版
2006/10/09 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
javascript基础知识
2016/06/07 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
Python实现带百分比的进度条
2016/06/28 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
详解python中的index函数用法
2019/08/06 Python
python常用排序算法的实现代码
2019/11/08 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
计算机专业个人求职信范例
2013/09/23 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
网络宣传方案
2014/03/15 职场文书
民主评议党员工作总结
2014/10/20 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
财务部会计岗位职责
2015/02/03 职场文书
教师年度考核个人总结
2015/02/12 职场文书
运动与健康自我评价
2015/03/09 职场文书
新闻通讯稿模板
2015/07/22 职场文书
合作意向书怎么写
2019/06/24 职场文书