关于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. 正文处理命令及tar命令

    使用cat命令进行文件的纵向合并,具体命令如下所示(注意:>代表将左边命令的执行结果以覆盖的方式放到右边,>>代表将左边命令的执行结果追加到右边) 关于tar命令的一些用法: tar ...

  2. Python基础——列表、元组操作

    列表.元组操作 列表: 列表是Python中最基本的数据结构,列表是最常用的Python数据类型,列表的数据项不需要具有相同的类型.列表中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0 ...

  3. CorelDRAW快速制作抖音幻影图像效果

    本教程讲解非常受欢迎的幻影图像效果(Anaglyph 3d),也叫图像分色立体效果,这其中我们要用到CorelDRAW中的透明度工具. 在开始实施Anaglyph效应之前,应当知道,Anaglyph  ...

  4. CAD绘制一个对齐标注（com接口VB语言）

    主要用到函数说明: _DMxDrawX::DrawDimAligned 绘制一个对齐标注.详细说明如下: 参数 说明 DOUBLE dExtLine1PointX 第一条界线开始点X值 DOUBLE ...

  5. dp有哪些种类

    dp有哪些种类 一.总结 一句话总结: 二.dp动态规划分类详解 动态规划一直是ACM竞赛中的重点,同时又是难点,因为该算法时间效率高,代码量少,多元性强,主要考察思维能力.建模抽象能力.灵活度. * ...

  6. 爬虫文件存储-1：mysql

    1.连接并创建数据库 import pymysql db = pymysql.connect(host='localhost', user='root', password='root', port= ...

  7. Thesis Viva checklist

    This list gives you suggestions helpful in preparing to defend your thesis: I know my thesis thoroug ...

  8. 解决Eclipse导入项目后Validating验证缓慢的问题

    减少不必要的验证即可 步骤:Window-Preferences-左侧的Validation 如图所示,将Build一列的勾全部去掉就好了. 如需手动校验,右键项目名-选择Validate即可.

  9. HTML的基本操作学习----常用标签，特殊符号，列表，表格，表单

    什么是HTML 常用标签 标题标签 段落标签 粗体标签+斜体 超链接标签 图片标签 列表标签 无序标签 有序标签 自定义列表 div标签 特殊符号 表格 表单 HTML 什么是 HTML?   HTM ...

  10. Spring中Bean的作用域差别

    我觉得servlet和spring交叉起来,理解得快. Bean的作用域中,prototype和singleton作用域效果不一样,前者每次都会有新的实例,而后者始终一个实例 . 所以,java.ut ...