本文实例讲述了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实现form表单基于ajax无刷新提交方法详解的更多相关文章

  1. jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...

  2. jquery序列化from表单使用ajax提交返回json数据（使用struts2注解result type = json）

    1.action类引入struts2的"json-default"拦截器栈 @ParentPackage("json-default") //示例 @Paren ...

  3. 基于Bootstrap+jQuery.validate Form表单验证实践

    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...

  4. thinkphp处理jQuery EasyUI form表单问题

    jQuery EasyUI form表单不是ajax方式提交,而是在提交的时候新建一个隐藏的iframe并在iframe里面创建一个与绑定表单一样的表单,然后在iframe里面进行同步提交而不是异步提 ...

  5. form表单的ajax验证2

    form表单的ajax验证2: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  6. 关于form表单或者Ajax向后台发送数据时，数据格式的探究

    最近在做一个资产管理系统项目,其中有一个部分是客户端向服务端发送采集到的数据的,服务端是Django写的,客户端需要用rrequests模块模拟发送请求 假设发送的数据是这样的: data = {'s ...

  7. laravel中form表单，ajax传值没反应

    laravel中form表单,ajax传值没反应时,可能是令牌有问题. form中添加: {{csrf_token()}} ajax中添加: data: {'page': page, '_token' ...

  8. Django框架 之 Form表单和Ajax上传文件

    Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...

  9. jQuery控制form表单元素聚焦

      CreateTime--2017年5月28日08:57:16Author:Marydon jQuery使form表单的第一个文本框聚焦 /** * 使form表单的第一个文本框聚焦 */ func ...

随机推荐

  1. Flask中before_request与after_request使用

    目录 1.前提,装饰器的弊端 2.before_request与after_request 2.1 before_request分析: 2.2 after_request分析: 3.before_re ...

  2. lua 的匹配规则

    匹配规则 .(点): 与任何字符配对 %a: 与任何字母配对 %c: 与任何控制符配对(例如\n) %d: 与任何数字配对 %l: 与任何小写字母配对 %p: 与任何标点(punctuation)配对 ...

  3. 深浅拷贝、集合set、函数、日志

    #-----深浅拷贝---- import copy a = ["xiaoming",111,[5000,2000]] b = a print("b:%s" % ...

  4. tensorflow运行时错误:服务似乎挂掉了,但是会立刻重启的.

    以前在POD里跑起来,没问题的示例代码. 移到jupyter中,多给两个GPU,有时运行就会爆出这个错误: 于是,按网上的意见,暂时加了个使用GPU的指定, 暂时搞定. 如下红色部分. import ...

  5. flask实战-个人博客-视图函数

    视图函数 在上面我们创建了所有必须的模型类.模板文件和表单类.经过程序规划和设计后,我们可以创建大部分视图函数.这些视图函数暂时没有实现具体功能,仅渲染对应的模板,或是重定向到其他视图.以blog蓝本 ...

  6. Babel7 转码

    ES6 (ES2015)更新了很多新的js语法, 也添加了一些新的API, 但不是所有的浏览器对这些新特性都支持的很好, 通过babel可以高版本的js转成低版本的js (ES 5.1), 同时对于J ...

  7. mac下操作小记

    安装homebrew https://juejin.im/post/5c738bacf265da2deb6aaf97 主要问题:按官网安装方法(/usr/bin/ruby -e "$(cur ...

  8. vue动态添加路由，跳转页面时，页面报错路由重复：vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }

    之前用了一个vue-element-admin做了一个小项目,里面用到了动态添加路由,动态展示侧边栏, 当我切换页面时,控制台总是警告提示路由重复,连续跳转几次页面后,控制台就被这些警告占满了, 于是 ...

  9. 第08组 Beta冲刺（2/5）

    队名:955 组长博客:点这里! 作业博客:点这里! 组员情况 组员1(组长):庄锡荣 过去两天完成了哪些任务 文字/口头描述 ?按照时间进度的安排进行相应的检查 展示GitHub当日代码/文档签入记 ...

  10. 作业：用pygame实现俄罗斯方块

    用Pygame实现俄罗斯方块 参考资料后我安装了Pygame,参考了网上的代码实现了俄罗斯方块小游戏.我试着理解网上的代码的原理和含义,对这些代码的原理有了一个粗略地理解,代码通过参数,RGB值等来实 ...