<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. AppCan10个超实用的APP必备插件，让你少敲80%代码

    一个APP的需求来自于哪儿?产品.老板.客户….. 做程序员不容易,需求一句话,就是几千几万行代码!所幸,在AppCan平台开发APP,开发者只需完成应用的前端部分,至于各项复杂的功能,就交给AppC ...

  2. go中rune和byte的用处

    参考:https://www.jianshu.com/p/4fbf529926ca rune是用来区分字符值和整数值的 byte 等同于int8,即一个字节长度,常用来处理ascii字符 rune 等 ...

  3. leetcode 153. Find Minimum in Rotated Sorted Array 、154. Find Minimum in Rotated Sorted Array II 、33. Search in Rotated Sorted Array 、81. Search in Rotated Sorted Array II 、704. Binary Search

    这4个题都是针对旋转的排序数组.其中153.154是在旋转的排序数组中找最小值,33.81是在旋转的排序数组中找一个固定的值.且153和33都是没有重复数值的数组,154.81都是针对各自问题的版本1 ...

  4. OpenCV3计算机视觉Python语言实现笔记（二）

    1. 图像与原始字节之间的转换 从概念上讲,一个字节能表示0到255的整数.目前,对于多有的实时图像应用而言,虽然有其他的表示形式,但一个像素通常由每个通道的一个字节表示. 一个OpenCV图像是.a ...

  5. Python从菜鸟到高手（6）：获取用户输入、函数与注释

    1. 获取用户输入   要编写一个有实际价值的程序,就需要与用户交互.当然,与用户交互有很多方法,例如,GUI(图形用户接口)就是一种非常好的与用户交互的方式,不过我们先不讨论GUI的交互方式,本节会 ...

  6. 【Java并发.5】基础构建模块

    本章会介绍一些最有用的并发构建模块,有丶东西(最后一小节,纯干货). 5.1 同步容器类 同步容器类包括 Vector 和 Hashtable ,这些类实现线程安全的方式是:将它们的状态封装起来,并对 ...

  7. Python股票分析系列——获得标普500的所有公司股票数据.p6

    该系列视频已经搬运至bilibili: 点击查看 欢迎来到Python for Finance教程系列的第6部分. 在之前的Python教程中,我们介绍了如何获取我们感兴趣的公司名单(在我们的案例中是 ...

  8. Item 26: 避免对universal引用进行重载

    本文翻译自<effective modern C++>,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 如果你需要写一个以名字作为参数,并记录下当前日期和 ...

  9. 微信小程序—如何获取用户输入文本框的值

    我们就拿简单常用的登录来举例子吧,先看最终效果图片

  10. c++入门之——const在函数名前面和函数后面的区别

    class Test(){ public: Test(){} const int foo(int a); const int foo(int a) const; }; 一.概念 当const在函数名前 ...