jQuery使用$.ajax提交表单完整实例


Posted in Javascript onDecember 11, 2015

本文实例讲述了jQuery使用$.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="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);
%>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
Java无向树分析 实现最小高度树
Apr 09 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 #Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 #Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 #Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 #Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 #Javascript
Express的路由详解
Dec 10 #Javascript
在 Express 中使用模板引擎
Dec 10 #Javascript
You might like
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
php文本转图片自动换行的方法
2013/03/13 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
axios基本入门用法教程
2017/03/25 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
关于反爬虫的一些简单总结
2017/12/13 Python
Django视图和URL配置详解
2018/01/31 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
Python连接字符串过程详解
2020/01/06 Python
python进度条显示之tqmd模块
2020/08/22 Python
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
初一家长会邀请函
2014/01/31 职场文书
财务信息服务专业自荐书范文
2014/02/08 职场文书
保险内勤岗位职责
2014/04/05 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书