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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style type="text/css">
10       </style>
11 </style>
12 </head>
13     <input type="button" id="btn" value="Ajax测试">
14     <div id="test"></div>
15 <body>
16 <script type="text/javascript">
17     $(function(){
18         $('#btn').click(function(){
19               //get方式提交数据
20             // $('#test').load('test.php?password=1234560')
21               //post方式提交数据
22             $('#test').load('test.php',{
23                 password:'1234560'
24             })
25         })
26     })
27 </script>
28 </body>
29 </html>

php

 1 <?php
 2     /*
 3     //echo "51自学网";
 4     //get方式提交数据
 5     if ($_GET['password']=='123456') {
 6         echo "登陆成功";
 7     }else{
 8         echo "密码错误";
 9     }
10     */
11     //post方式提交数据
12     if ($_POST['password']=='123456') {
13         echo "登陆成功";
14     }else{
15         echo "密码错误";
16     }
17 ?>