关于Ajax

1.干什么的？

ajax负责抓取用户名信息，传递给服务器进行校验；

2.属性：
　　onreadystatechange：事件，该事件可以感知ajax状态(readyState)的变化。ajax请求过程中要随时感知其状态　　

　　readyState：表示ajax状态值

　　　　 ajax有5种状态readyState：
       　　 0------> 创建ajax对象完毕
       　　 1------> 有调用open()方法
       　　 2------> 有调用send()方法
       　　 3------> 服务器端数据只返回了一部分
        　　4------> 服务器端数据全部返回，ajax请求完成

　　responseText：以字符串形式接收服务器端返回的信息

3.方法：
       open()：创建一个新的http请求

send():发送请求到服务器

　　例如：

　　　　get：$xhr.open("get","123.php?a=1&b=2")；$xhr.send(null);　　//如果方式为get，则send为null

　　　　post：$xhr.open("post","123.php)；post方法的对应的send：

　　　　//(要在open()方法执行之后设置)

　　　　xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

　　　　var info = "name=abc&age=20";

　　　　xhr.send(info);

 4.同步异步：

async：true/false,

true(默认):异步。同时可进行多个操作。

false：同步。同一时间只能进行一个操作。

5.页面跳转

ajax不能从php页面直接进行跳转，只是返回一个数据。要想跳转页面要从js跳转。

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>三级联动</title>

 </head>

 <body>

 省：<select name="" id="sheng" onChange="selshi(this)">

         <option value="">请选择</option>

 </select>

 市：<select name="" id="shi" onChange="selqu(this)">

         <option value="">请选择</option>

 </select>

 区：<select name="" id="qu">

         <option value="">请选择</option>

 </select>

 </body>

 </html>

 <script>

     var attr = [];

     //页面加载完成显示省的内容

     window.onload = function(){

         //发起请求

         sendInfo("sheng");

     }

     function sendInfo(type,code=0){

         //创建对象

         var xhr = new XMLHttpRequest();

         //监听ajax状态

         //responseText(返回值)

         xhr.onreadystatechange = function(){

             if(xhr.readyState == 4){

                 //处理数据

                 chuliData(xhr.responseText,type);

             }

         }

         //创建请求

         xhr.open("get","conn_db.php?type="+type+"&code="+code);

         //发送请求

         xhr.send(null);

     }

     function chuliData(data,type){

         //将字符串转为二维字符数组arr：1,山东；3,河北；

         var arr = data.split(";");

         var str = '';

         for(var i = 0; i < arr.length; i++){

             //拆分二维数组为：1,山东

             attr[i] = arr[i].split(",");

             //option的value = 1，内容 = 山东

             str += '<option value="'+attr[i][0]+'">'+attr[i][1]+'</option>';

         }

         console.log(str);

         document.getElementById(type).innerHTML = str;

     }

     function selshi(obj){

         sendInfo('shi',obj.value);

     }

     function selqu(obj){

         sendInfo('qu',obj.value);

     }

 </script>

三级联动示例：html+js部分

 <?php

     //链接数据库

     $db = new mysqli('localhost','root','123456','sjld');

     //判断链接是否成功

     !mysqli_connect_error() or die("连接失败");

     //设置字符编码

     $db->query("set names utf8");

     $sql = "";

     $str = "";

     //获取code（上级id）

     $get_code = $_GET['code'];

     //根据$get_code查询出相关数据

     $sql = "select id,area_name from dt_area where pid = $get_code";

     $res = $db->query($sql);

     $arr = $res->fetch_all();

     //处理二维数组$arr,先转为字符串

     foreach($arr as $v){

         foreach($v as $vv){

             $str .= $vv.",";

         }

         //去掉最后一个逗号

         $str = substr($str,0,-1);

         //一组结束，用；分隔

         $str .= ";";

     }

     //去掉最后一个分号

     $str = substr($str,0,-1);

 echo $str;

三级联动示例：php部分

0509 关于Ajax + 三级联动示例的更多相关文章

  1. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

  2. 使用 AJAX + 三级联动 实现分类出全国各地的省，市，区

    使用AJAX + 三级联动  实现分类出全国各地的省,市,区 也可以将下面的显示页面所写的 function循环,封装成js文件,就是在写代码软件里创建一个js文件,就和创建一个HTML或php文件一 ...

  3. AJAX 三级联动

    新的封装类 <?php class DBDA { public $host="localhost";//服务器地址 public $uid="root"; ...

  4. ajax三级联动下拉菜单

    ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...

  5. [Ajax三级联动 无刷新]

    三级联动 的效果图 html页面: <body> <label class="fl">区域:</label> <select class= ...

  6. 2019.03.25 Ajax三级联动

    所谓三级联动就是,一层接着一层,根据上一层的选择给出这一层的结果 如选择市之后,会给出相应的区,然后到相应的县这就是联动 配置视图 ​from django.core import serialize ...

  7. ajax 三级联动商品分类（转载）

    转载  自  jines     http://www.cnblogs.com/lijinblogs/p/5759399.html 思路分析:效果:当页面加载时,利用ajax异步向后台请求数据,加载一 ...

  8. Ajax三级联动

    全国省市县查询 html代码 <!doctype html> <html> <head> <meta charset="utf-8"> ...

  9. 原生javascript AJAX 三级联动

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

随机推荐

  1. 写一个 sum方法，在使用下面任一语法调用时，都可以正常工作

    console.log(sum(2,3)); // Outputs 5 console.log(sum(2)(3)); // Outputs 5 (至少)有两种方法可以做到: 方法1: functio ...

  2. php省市区三级联动

    效果 步骤 前端:通过ajax请求获取数据,使用了jquery 页面一开始加载所有省份信息 ->当选择省下拉框后触发改变监听时间-change ->当选择市下拉框后触发改变监听时间-cha ...

  3. PAT_A1066#Root of AVL Tree

    Source: PAT A1066 Root of AVL Tree (25 分) Description: An AVL tree is a self-balancing binary search ...

  4. NOIWC2019 冬眠记

    冬眠 由于THUWC考太差了没啥心情做事…… Day -1 报到日前一天晚上去看了看宿舍表,发现周围全是集训队,隔壁就是栋爷.高队和lca,再隔壁是zzq和wxh……吓傻了(本校buff这么好吗) D ...

  5. 【vue】挂载点概念

    ## vue vue是mvvm模型,自底向上逐层应用,用于构建用户界面的渐进式框架. ### 挂载点.模板.实例 挂载点,vue仅处理挂点下面的内容(dom节点).挂载点内部的为模板. <div ...

  6. php中fopen不能创建中文文件名文件的问题

    之前网页的chartset用的是utf-8,文件也用utf-8,然后用fopen()创建一个中文文件名的文件时问题就出来了,文件名都是乱 码! 查看了很多文档试了不少方法都解决不了,本来想着用别的方法 ...

  7. wget扒网站

    wget神奇操作   整站复制 只限静态网页 wget -P 指定下载路径 -p 获取显示HTML页面所需的所有图像 -k  使链接指向本地文件 -H  递归时转到外部主机. wget --mirro ...

  8. python--(十步代码学会线程)

    python--(十步代码学会线程) 一.线程的创建 Thread实例对象的方法 # isAlive(): 返回线程是否活动的. # getname(): 返回线程名. # setName(): 设置 ...

  9. Linux - redis主从同步

    目录 Linux - redis主从同步 环境准备 配置主从同步 测试写入数据,主库写入数据,检查从库数据 手动进行主从复制故障切换 Linux - redis主从同步 原理: 从服务器向主服务器发送 ...

  10. 第二节：numpy之数组切片、数据类型转换、随机数组