关于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. 转：selenium自动化脚本错误总结

    https://blog.csdn.net/zxy987872674/article/details/53141118

  2. JavaScript面试题链接汇总

    最新JavaScript笔试题(含答案) - 爱思资源网 前端工程师面试问题列表 - 爱思资源网 腾讯最新前端面试题记录分享 - 爱思资源网 优酷前端JS部分面试题 - 爱思资源网 百度校园招聘web ...

  3. 安装nodejs6.9x以后,原来在nodejs4.2.x中运行正常的ionic项目出现问题的解决

    安装nodejs6.9x以后,原来在nodejs4.2.x中运行正常的程序出现的问题.看错误信息,由于NodeJs版本升级导致的. 到提示的目录下运行:npm rebuild node-sass -g ...

  4. （转）Arcgis for javascript实现百度地图ABCD marker的效果

    概述: 在我的博客中,有一篇相关的文章,这段时间,有很多人问我求源码,只是时间过去已长,源代码已找不到,乘着这个9.3放假,又重新实现了下,并相关代码做了优化,在此贴出来,方便大家使用. 相关文章地址 ...

  5. python笔记之发送邮件

    发送邮件前提:开启邮箱授权码 一.开启授权码(以163邮箱为例) 1.登录163邮箱,点击设置--POP3/SMTP/IMAP,出现设置界面   2. 开启SMTP服务且可以查询SMTP的host地址 ...

  6. Memcached 之PHP实现服务器集群一致性hash算法

    /** * memcached 一致性hash,分布式算法 * Class MemcacheCluster */ class MemcacheCluster { protected $nodes = ...

  7. CAD在图纸保存的同时，也把基本信息保存了（网页版）

    主要用到函数说明: MxDrawXCustomFunction::Mx_SaveDwgToURLEx 保存DWG文件到服务器上的扩展函数.详细说明如下: 参数 说明 pszServerUrl 服务器网 ...

  8. Python random模块&string模块 day3

    一.random模块的使用: Python中的random模块用于生成随机数.下面介绍一下random模块中最常用的几个函数. 1.常用函数: (1)random.random() 用于生成一个0到1 ...

  9. hdu2008 数值统计【C++】

    数值统计 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  10. mybatis源码阅读-MappedStatement各个属性解析过程(八)

    调用方 类org.apache.ibatis.builder.xml.XMLMapperBuilder private void configurationElement(XNode context) ...