关于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. Django 更新字段

    Django在1.7以后的版本提供数据迁移命令,用来在修改模型中的字段,更新到数据库 1. python manager.py makemigrations 命令用来创建迁移文件版本的 2. pyth ...

  2. 计组_IEEE754_练习题

    IEEE754   阶码:移码:尾数:原码 一个规格化的32位浮点数x的真值可表示为:          x=(-1)^s×(1. M) × 2^(E-127)       e=E-127 其中尾数域 ...

  3. TCP:三次握手，URG、ACK、PSH、RST、SYN、FIN 含义

    http://blog.csdn.net/wudiyi815/article/details/8505726 TCP:SYN ACK FIN RST PSH URG简析   三次握手Three-way ...

  4. listcontrol 加combobox实现

    头文件 #pragma once#include "D:\Work\山东项目\StandardizedDrawing\sdUtils\CSGrid.h"#include " ...

  5. python包与模块

    Python基础-包与模块 摘要 为重用以及更好的维护代码,Python使用了模块与包:一个Python文件就是一个模块,包是组织模块的特殊目录(包含__init__.py文件). 模块搜索路径,Py ...

  6. chrome本地测试cookie时无效的原因

    https://blog.csdn.net/lyj787505955/article/details/38079079 应该是chrome的原因, 同一网页放在tomcat后,通过localhost方 ...

  7. JavaScript学习笔记之DOM对象

    目录 1.Document 2.Element 3.Attribute 4.Event 1.Document 每个载入浏览器的 HTML 文档都会成为 Document 对象,Document 对象允 ...

  8. C#学习笔记_12_枚举&结构体

    12_枚举&结构体 枚举 是一种数据类型 适用于某些取值范围有限的数据 语法: [访问权限修饰符] enum 枚举名 { 枚举值 } 枚举名遵循大驼峰命名法 枚举一般情况下是和switch c ...

  9. PAT 1118 Birds in Forest

    Some scientists took pictures of thousands of birds in a forest. Assume that all the birds appear in ...

  10. nyoj 307

    /*这是一道最短路变形题 从每个有藏宝的地方为起点 求到各个点的可以的最大重量,相当于求出了从出口 到 一个藏宝点 所  允许的最大重量,把所有藏宝点的按重量 排序(从小到大)先到最小的藏宝点带上 宝 ...