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

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 "密码错误";
}
?>
 
上一篇:apply、bind、call方法的作用与区别


下一篇:js进阶 14-6 $.ajax()方法如何使用