关于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. Java多线程学习笔记（一）——多线程实现和安全问题

    1. 线程.进程.多线程: 进程是正在执行的程序,线程是进程中的代码执行,多线程就是在一个进程中有多个线程同时执行不同的任务,就像QQ,既可以开视频,又可以同时打字聊天. 2.线程的特点: 1.运行任 ...

  2. /etc目录常用配置文件

    /etc/resolv.conf DNS客户端配置文件,逐渐被网卡配置文件所替代 /etc/hosts 本机DNS解析文件,优先级高于DNS服务器 /etc/hostname CentOS 7 主机名 ...

  3. drf07 过滤 排序 分页 异常处理 自动生成接口文档

    4. 过滤Filtering 对于列表数据可能需要根据字段进行过滤,我们可以通过添加django-fitlter扩展来增强支持. pip install django-filter 在配置文件sett ...

  4. Labview学习笔记（三）

    一.数据 1.数值控件 (1)数值控件 根据不同的模拟状态,放置不同控件 (2)显示格式 为了程序显示,需要设置数值型控件的表示法.数值范围.显示格式等属性. 一般来说,长度越长,则可以表示的数值范围 ...

  5. 1、DataGridView

    DataGridView赋值后 通过RowPostPaint事件绘制行号 private void AddXh() { DataGridViewTextBoxColumn col = new Data ...

  6. uvalive 3231

    3231 - Fair ShareAsia - Seoul - 2004/2005You are given N processors and M jobs to be processed. Two ...

  7. bytes类型和python中编码的转换方法

    一.bytes类型 bytes类型是指一堆字节的集合,在python中以b开头的字符串都是bytes类型.例如: >>> a = "中国" >>> ...

  8. Python网络爬虫之Scrapy框架（CrawlSpider）

    目录 Python网络爬虫之Scrapy框架(CrawlSpider) CrawlSpider使用 爬取糗事百科糗图板块的所有页码数据 Python网络爬虫之Scrapy框架(CrawlSpider) ...

  9. 运维系列之二 Linux文件种类和扩展名

    一.文件种类 1.普通文件 用ls查看文件属性时,显示的是[-] 2.目录文件(directory) 文件属性第一个为[d] 3.连接文件(link) 类似于win下的快捷方式,文件第一个属性为[l] ...

  10. Lifting the Stone 计算几何 多边形求重心

    Problem Description There are many secret openings in the floor which are covered by a big heavy sto ...