js进阶 14-2 如何用ajax验证登陆状态（这里用load方法）

一、总结

一句话总结：$('#test').load('test.php?password=1234560')，这样就get方式提交了密码。

1、load函数的三个参数分别是什么？

都有一个参数是方法完成时的执行函数，第二个参数是传递到后台的数据，第一个参数是url

.load()从服务器加载数据，然后把返回到HTML放入匹配元素。

语法：load(url,data,function(response,status,xhr))

1.必需的URL参数规定您希望加载的URL。

2.可选的data参数规定与请求一同发送的查询字符串键/值对集合。

3.可选的callback参数是load()方法完成后所执行的函数名称

2、load方法如何post方式提交数据？

用load的第二个参数

22             $('#test').load('test.php',{

23                 password:'1234560'

24             })
11     //post方式提交数据

12     if ($_POST['password']=='123456') {

13         echo "登陆成功";

14     }else{

15         echo "密码错误";

16     }

二、如何用ajax验证登陆状态（这里用load方法）

1、相关知识

load()方法

jQuery load()方法作用是从服务器加载数据，是一个简单但强大的AJAX方法。

  • .load()从服务器加载数据，然后把返回到HTML放入匹配元素。

    语法：load(url,data,function(response,status,xhr))

    1.必需的URL参数规定您希望加载的URL。

    2.可选的data参数规定与请求一同发送的查询字符串键/值对集合。

    3.可选的callback参数是load()方法完成后所执行的函数名称

  • 回调函数参数含义

    1. responseTxt-包含调用成功时的结果内容

    2. statusTXT-包含调用的状态：可能是"success"、"notmodifide"、"error"、'timeout"、"abort"或"parsererror"中的一个，最长见的是：succes成功;error错误

    3. Xhr-经过jQuery封装的XMLHttpRequest对象（保留其本身的所有属性和方法）

 

2、代码

html

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style type="text/css">

       </style>

 </style>

 </head>

     <input type="button" id="btn" value="Ajax测试">

     <div id="test"></div>

 <body>

 <script type="text/javascript">

     $(function(){

         $('#btn').click(function(){

               //get方式提交数据

             // $('#test').load('test.php?password=1234560')

               //post方式提交数据

             $('#test').load('test.php',{

                 password:'1234560'

             })

         })

     })

 </script>

 </body>

 </html>

php

 <?php

     /*

     //echo "51自学网";

     //get方式提交数据

     if ($_GET['password']=='123456') {

         echo "登陆成功";

     }else{

         echo "密码错误";

     }

     */

     //post方式提交数据

     if ($_POST['password']=='123456') {

         echo "登陆成功";

     }else{

         echo "密码错误";

     }

 ?>
 

js进阶 14-2 如何用ajax验证登陆状态（这里用load方法）的更多相关文章

  1. js进阶 14 jquery的ajax有哪些函数和事件（多练）

    js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...

  2. 【 D3.js 进阶系列 — 1.2 】 读取 CSV 文件时乱码的解决方法

    在 D3 中使用 d3.csv 读取 CSV 文件时,有时会出现乱码问题. 怎么解决呢? 1. 乱码问题 使用 d3.csv 读取 xxx.csv 文件时.假设 xxx.csv 文件使用的是 UTF- ...

  3. js进阶正则表达式14验证邮编（input的pattern属性）（正则表达式加起^始$）

    js进阶正则表达式14验证邮编(input的pattern属性)(正则表达式加起^始$) 一.总结 1.input的pattern属性:里面可以直接放正则表达式,<input type=&quo ...

  4. JS表单验证插件(支持Ajax验证)

    自己编写了一个表单验证插件,支持ajax验证,使用起来很简单. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:ru ...

  5. Js表单验证控件-02 Ajax验证

    在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...

  6. 14.ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  7. js进阶 14-9 ajax事件有哪些

    js进阶 14-9 ajax事件有哪些 一.总结 一句话总结:ajax开始时事件.发送时事件,请求完成时事件,请求成功时事件,请求结束时事件,请求错误时事件事件. 1.ajax事件的监听对象是谁? 都 ...

  8. js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化

    js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化 一.总结 一句话总结:如果用ajax传递表单的数据,如果不进行表单的序列化,要一个参数一个参数的写,太麻烦,序列化的话,一句代 ...

  9. js进阶 14-6 $.ajax()方法如何使用

    js进阶 14-6 $.ajax()方法如何使用 一.总结 一句话总结:$.ajax([settings])settings可选.用于配置Ajax请求的键值对集合. 1.$.ajax()的特点是什么( ...

随机推荐

  1. Django and Scrapy 用法图片

  2. 【Henu ACM Round#14 C】Duff and Weight Lifting

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 2^y可以由两个2^(y-1)相加得到. 则有一个贪心的策略. 就是2^x尽量都变成2^(x+1) (即能够凑就尽量凑) 如果x还有 ...

  3. kettle(一)概述

    近期两个月一直和kettle打交道,从開始的没听说过,到如今能够熟练运用,不得不说项目驱动下,学习东西是最快的.好了,尽管使用kettle应付项目的任务绰绰有余.可是还是想系统的学习一下,总结一下.比 ...

  4. UML类图中的几种关系总结

           UML类图,描写叙述对象和类之间相互关系的方式包含:依赖(Dependency).关联(Association).聚合(Aggregation).组合(Composition).泛化(G ...

  5. Can not find a java.io.InputStream with the name [downloadFile] in the invocation stack.

    1.错误描写叙述 八月 14, 2015 4:22:45 下午 com.opensymphony.xwork2.util.logging.jdk.JdkLogger error 严重: Excepti ...

  6. vuejs模板中使用html代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 阿里云 Ubuntu14.04 升级 python3.4 到 python 3.5/6

    买的阿里云服务器给的系统是Ubuntu14.04,里面装的Python3版本是Python3.4,本来也没什么,但是这个版本的Python安装flask和django各种报错,所以只好升级Python ...

  8. golang-小试牛刀

    首先说下,我为什么选择go吧.之前一直做的都是.net平台下的开发,常用的服务端语言就是C#.刚接触C#的时候,就喜欢上了这种高级语言,它优雅.易上手.开发周期短,很多高级特性以及自带的托管内存管理G ...

  9. 使用Spring实现MySQL读写分离（转）

    使用Spring实现MySQL读写分离 为什么要进行读写分离 大量的JavaWeb应用做的是IO密集型任务, 数据库的压力较大, 需要分流 大量的应用场景, 是读多写少, 数据库读取的压力更大 一个很 ...

  10. 联合体union用在何处？

    程序设计刚開始学习的人在学习时,总想问:"这个东东有什么用?"于是,在建设有关的教学资源时,也便总从这个角度,试图给出一些案例,这是一个将刚開始学习的人作为教学目标人群的人该干的事 ...