<html>

 <head>

     <meta charset="UTF-8">

     <title>登陆页面</title>

     <link rel='stylesheet prefetch' href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css'>

     <link rel="stylesheet" href="css/style.css">

     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

     <script type="text/javascript">

         function sub() {

             var name = $("#name").val();

             var password = $("#password").val();

             //第二步：验证数据，这里需要从数据库调数据，我们就用到了ajax

             $.ajax({

                 url: "/submit",//请求地址

                 data: {name: name, password: password},//提交的数据

                 type: "POST",//提交的方式

                 dataType: "TEXT", //返回类型 TEXT字符串 JSON XML

                 success: function (data) { // 校验返回内容，进行跳转

                     //开始之前要去空格，用trim()

                     if (data.trim() == "true") {

                         window.location.href = "/welcome?name=" + name;

                     }

                     else {

                         alert("用户名或者密码错误!");

                     }

                 },

                 error: function (xhr) {

                     // 失败输出HTTP状态码

                     alert("调用失败！HTTP状态码：" + xhr.status);

                 }

             })

         }

     </script>

 </head>

 <body>

 <div class="wrapper">

     <div class="form-signin">

         <h2 class="form-signin-heading">请登陆</h2>

         <input type="text" class="form-control" value="tom" name="name" id="name" placeholder="用户名" required=""

                autofocus=""/>

         <input type="password" class="form-control" value="123" name="password" id="password" placeholder="密码"

                required=""/>

         <label class="checkbox">

             <input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe">记住我

             <a href="infoSubmit.html" class="regsiter">注册</a>

         </label>

         <button type="submit" id="btn" class="btn btn-lg btn-primary btn-block" onclick="sub()">登陆</button>

     </div>

 </div>

 </body>

 </html>

style.css

 body {

     background: #eee !important;

 }

 .wrapper {

     margin-top: 80px;

     margin-bottom: 80px;

 }

 .form-signin {

     max-width: 380px;

     padding: 15px 35px 45px;

     margin: 0 auto;

     background-color: #fff;

     border: 1px solid rgba(0, 0, 0, 0.1);

 }

 .form-signin .form-signin-heading,

 .form-signin .checkbox {

     margin-bottom: 30px;

 }

 .form-signin .checkbox {

     font-weight: normal;

 }

 .form-signin .form-control {

     position: relative;

     font-size: 16px;

     height: auto;

     padding: 10px;

     -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

     box-sizing: border-box;

 }

 .form-signin .form-control:focus {

     z-index:;

 }

 .form-signin input[type="text"] {

     margin-bottom: -1px;

     border-bottom-left-radius:;

     border-bottom-right-radius:;

 }

 .form-signin input[type="password"] {

     margin-bottom: 20px;

     border-top-left-radius:;

     border-top-right-radius:;

 }

 .checkbox {

     margin-left: 100px;

 }

 .regsiter {

     margin-left: 20px;

 }

截图：

点击登陆按钮触发Ajax请求

Ajax之Jquery封装使用举例的更多相关文章

  1. Ajax之Jquery封装使用举例2（Json和JsonArray处理）

    本例主要使用ajax进行异步数据请求,并针对返回数据为json和jsonarray类型的数据处理. 本例中只有前端的代码,后端代码不是本文重点,故省略. 后端接口返回数据为: Json: {" ...

  2. 不借助jquery封装好的ajax，你能用js手写ajax框架吗

    不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...

  3. jQuery Ajax 二次封装

    jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="<%=path%> ...

  4. Jquery封装ajax

    Jquery封装ajax   Load方法     <!-- 将jquery.js导入进来 -->     <script type="text/javascript&qu ...

  5. 模仿JQuery封装ajax功能

    需求分析 因为有时候想提高性能,只需要一个ajax函数,不想引入较大的jq文件,尝试过axios,可是get方法不支持多层嵌套的json,post方式后台接收方式似乎要变..也许是我不太会用吧..其实 ...

  6. jQuery 封装的ajax

    jquery封装的ajax 具体操作: $.get(url  [,data]  [,fn回调函数]   [, dataType]); data:给服务器传递的数据,请求字符串 .json对象 都可以设 ...

  7. Jquery封装的ajax的使用过程发生的问题

    Jquery封装的ajax的使用过程发生的问题 今天在做项目的时候使用到了ajax来完成项目前后端数据交互,在之后发现在前端没有数据显示,而后端数据确实存在,在多次检查代码之后,发现代码并不存在问题, ...

  8. ajax的再次封装！(改进版) —— new与不 new 有啥区别？

    生命不息重构不止! 上一篇写了一下我对ajax的再次封装的方法,收到了很多有价值的回复,比如有童鞋建议用$.extend,一开始还以为要做成插件呢,后来才知道,原来这个东东还可以实现合并.省着自己再去 ...

  9. Ajax与Jquery题库

    一.    填空题 1.在JQuery中被誉为工厂函数的是 $() . 2.在jQuery中需要选取<div>元素里所有<a>元素的选择器是 $("div a&quo ...

随机推荐

  1. How to get Pycharm

    PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如:代码跳转.智能提示.自动完成.单元测试.版本控制.此外,该IDE提供了一些高级功能, ...

  2. CF341D Iahub and Xors

    CF341D Iahub and Xors 给定一个 \(n\times n\) 的矩阵,平面异或,求平面异或和 \((n\leq10^3,\ m\leq10^5)\) 树状数组 这里主要是记录一下板 ...

  3. MvcPager帮助文档 — PagerOptions 类

    http://www.webdiyer.com/mvcpager2/docs/pageroptions/ MvcPager帮助文档 — PagerOptions 类 表示包含MvcPager分页控件相 ...

  4. c#简单的io

    读取路径判断文件是否存在,进行删除或者创建 简单的io using System; using System.Collections; using System.Collections.Generic ...

  5. 【转】【强化学习】Deep Q Network(DQN)算法详解

    原文地址:https://blog.csdn.net/qq_30615903/article/details/80744083 DQN(Deep Q-Learning)是将深度学习deeplearni ...

  6. .Net架构篇:实用中小型公司支付中心设计

    前言 说起支付平台,支付宝量级的支付平台和一个小型公司的支付不可同日耳语.一个初创或刚创业一两年的公司,一没人力,二没财力的情况下,如果也想对接支付那怎么办呢?感谢支付宝和微信支付,两大行业巨头提供了 ...

  7. Arduino通过MAX9814实现录音

    如果通过Arduino进行录音不是单纯地接一个驻极电容MIC就可以的,因为自然界中的声音非常复杂,波形极其复杂,通常我们采用的是脉冲代码调制编码.即PCM编码.PCM通过抽样.量化.编码三个步骤将连续 ...

  8. WCF系列教程之消息交换模式之请求与答复模式(Request/Reply)

    1.使用WCF请求与答复模式须知 (1).客户端调用WCF服务端需要等待服务端的返回,即使返回类型是void (2).相比Duplex来讲,这种模式强调的是客户端的被动接受,也就是说客户端接受到响应后 ...

  9. 针对2017年淘宝开放平台应用整改被封停或强制入塔政策实现不入塔不模糊正常调用API的解决方案

    淘宝开放平台入驻先是限制上架,提高入驻资质,然后又模糊化R2信息,强制入塔,如今开始大规模整改应用. 此次整改势必导致很大一批个人开发的应用无法使用. 在此本人有偿提供正常调用淘宝开放平台API的解决 ...

  10. python第五章：文件--小白博客

    文件操作, 操作文件完毕后一定要记得close # 读,默认是rt(文本的方式读取),rb模式是以字节读取 # 文件路径可以用3中形式表示 f = open(r'C:\Users\fengzi\Des ...