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实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery实现回到顶部效果
Oct 19 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
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
使用PHP开发留言板功能
2019/11/19 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
javascript 一些用法小结
2009/09/11 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
javascript实现表单验证
2016/01/29 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
Python实现快速多线程ping的方法
2015/07/15 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
基于Python的PIL库学习详解
2019/05/10 Python
python爬取招聘要求等信息实例
2020/11/20 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
大学生简历中个人的自我评价
2013/10/06 职场文书
高中生学习总结的自我评价范文
2013/10/13 职场文书
小区停车场管理制度
2014/01/27 职场文书
物业管理专业自荐信
2014/07/01 职场文书
工作时间证明
2015/06/15 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书