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 相关文章推荐
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
Node.js实现断点续传
Jun 23 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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
PHP去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
PHP简洁函数小结
2011/08/12 PHP
php 邮件发送问题解决
2014/03/22 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
Add a Formatted Table to a Word Document
2007/06/15 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
幼儿运动会邀请函
2014/01/17 职场文书
咖啡馆创业计划书
2014/01/26 职场文书
个人函授自我鉴定
2014/03/25 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
2016年会开场白台词
2015/06/01 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
创业计划书介绍
2019/04/24 职场文书
win10搭建配置ftp服务器的方法
2022/08/05 Servers