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. 使用scatter画散点图

    刚开始接触Python,照着例子写的代码,百度注释的. from numpy import * import matplotlib import matplotlib.pyplot as plt im ...

  2. 【VC++学习笔记四】MFC应用程序中框架类的获取

    一.文档类中 获取视图: 先获取主窗体,在根据主窗体获取视图 pMain->GetActiveDocument();注意类型转换 由于文档中可能包含多个视图,可以按照下面函数获取: CView* ...

  3. react-native-swiper苹果正常显示，Android不显示

    在使用react-native-swiper时,最好不要放到(FlatList , SectionList,ListView,ScrollView 等)组件中,否则Android 可能不会正常显示图片 ...

  4. Windows Server 2016 辅助域控制器搭建

    Windows Server 2016 主域控制器搭建完成后,继续进行辅助域控制器搭建.1.更改服务器的IP地址2.修改服务器的名称3.打开服务器管理器,选择添加角色和功能4.选择,下一步5.选择,下 ...

  5. thinkphp3.2.3 隐藏url上home模块以及index.php文件

    1.去掉Home index.php 添加如下代码 define('BIND_MODULE', 'Home'); 这时就隐藏了url中的Home 2.去掉index.php thinkphp3.2.3 ...

  6. 【安卓】数据库基于脚本的&quot;增量更新&quot;,每次更新时不需改动java代码、!

    思路: 1.当然是基于SQLiteOpenHelper.onCreate(第一次安装程序时调用).onUpdate(升级程序时调用) 2.用"脚本"(脚本制作详细方法问度娘)做数据 ...

  7. [Android]新建项目继承Activity不继承ActionBarActivity

    在SDK更新后,在eclipse新建Android项目时.我们常常会碰到这样一种事情:新建的MainActivity不再继承Activity而是继承ActionBarActivity,因为一些人的开发 ...

  8. 84.friend友元类

    #include <iostream> using namespace std; //友元函数的主要作用就是访问私有变量 class myclass { public: friend cl ...

  9. 查看oracle数据库的启动时间

    Oracle的sys用户下有个视图v_$instance,该视图只有一行数据.通过SQL语名可查询其内容: select * from sys.v_$instance 此视图可查看很多东西,如实例名, ...

  10. artDialog提示框、对话框

    /** * 警告 * @param {String}消息内容 */ artDialog.alert = function (content, callback) { return artDialog( ...