• 实现Ajax无限极联动···


     自己的第一篇blog 竟是关于技术的 不可思议 ~

    自己在网上搜了一下关于Ajax联动的问题,很多的都是没有很明确的注释之类。原谅我是一枚php菜鸟,并且自己对Ajax不是很了解。就出现了很多看不懂的情况,今天自己琢磨了一下。

    终于写了出来。。。。。

    下面我会整理出来····

    首先我自己在数据库建立一个小的类型数据表(自己突然写博客 感觉好恐怖生怕自己什么说错了 哇哈哈~~) 哎呀 直接贴代码了。。。


    首先是 Ajax.php文件:

    这个文件我觉着就是接收数据处理数据的 

    <?php
    mysql_connect("localhost","root","");
    mysql_select_db("aaa");
    mysql_query("set names 'UTF8'");

    上面的这些代码 不用我说都知道是连接数据库的
    //select 语句
    1.//$q=mysql_query("select * from `newstype` where `kid`='".$_POST['id']."'");
    2.$sql="select * from `newstype` where `kid`='".$_POST['id']."'";

    $q=mysql_query($sql);

    上面的1和2的选项是因为 我写了一遍select语句出现报错了 然后我就又写了一遍 结果两个都对了 1 是注释掉了

    if(mysql_num_rows($q)!=0){  判断查找的语句的个数 如果是0的话就代表下面没有分支了 就不会显示了

    //记住在$_POST[]加()这是我出现的错误 

    echo "<select id='s".($_POST['num']+1)."' onchange='fun(".($_POST['num']+1).")'>";输出一个select选择框会添加到后来最终显示的页面的div里面 后面会做介绍

    while($rs=mysql_fetch_array($q)){
    echo"<option value=".$rs['id'].">".$rs['name']."</option>";select里面的option选项 value的值一定要给 因为我们要按照这个查找语句
    }
    echo "</select>";
    echo "<div id='list".($_POST['num']+1)."'></div>";因为做的是无限极联动 后面还要输出一个div的框 用来盛下一个的select框
    }
    ?>


    下面的是Ajax.js文件var xmlhttp;定义一个变量

    function createxml(){这个部分主要是用来判断浏览器
    if(window.XMLHttpRequest){ XMLHttpRequest是javascript里面内置的属性 具体的作用 大家自己去翻手册
    xmlhttp=new XMLHttpRequest();
    }else if(window.ActiveXObject){
    xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
    }
    }
    function fun(n){  这个方法是展示页中 select onchange事件调用
    createxml();
    var id=document.getElementById("s"+n).value;  是选取对应的id的select里面的value值 就是我们上面说道的数据库中的ID字段
    xmlhttp.open("post","Ajax.php",true);  打开请求
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //id之后还有一个+
    xmlhttp.send("id="+id+"&num="+n); 发送请求 获取这个id的值 和 n的值 并且分别赋值给 id 和 num 
    xmlhttp.onreadystatechange=function(){stylefun(n)}; 触发onreadystatechange调用stylefun(n)方法 并且设置n参数
    }
    function stylefun(n){
    if(xmlhttp.readyState==4 && xmlhttp.status==200){已经接受完成之后 把获得的text赋值给对应id的div标签里面
    //innerHTML 记住html是大写
    document.getElementById("list"+n).innerHTML=xmlhttp.responseText;
    }
    }


    下面是展示页面liandong.php(原谅我起名字的时候都是很简单的思维)

    <?php
    mysql_connect("localhost","root","")or die("链接数据库失败");
    mysql_select_db("aaa");
    mysql_query("set names'UTF8'");
    $sql="select * from `newstype` where `kid` = 0";先查找最初的根目录类型
    $query=mysql_query($sql);
    while($rs=mysql_fetch_array($query)){
    $arr[]=$rs;
    }

    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="Ajax.js"></script>
    </head>
    <body>
    <!--无限极联动-->
    <select id="s1" onchange="fun(1)">
    <?php
    foreach($arr as $v){
    echo "<option value='".$v['id']."'>".$v['name']."</option>";
    }
    ?>
    </select>
    <div id="list1">
    </div>
    </body>
    </html>


    好了 结束了 自己的第一篇blog  如果出现的什么错误 大家见谅一下哈  欢迎指出不足之处 上述都是自己的一些理解观点 

    小女子 以后会不断探寻技术 欢迎交流~~~

  • 相关阅读:
    P4097 [HEOI2013]Segment(李超线段树模板)
    P2155 [SDOI2008]沙拉公主的困惑
    BZOJ3675 [Apio2014]序列分割[斜率优化dp]
    hdu4261 Estimation[暴力dp+对顶堆]
    poj2374 Fence Obstacle Course[线段树+DP]
    poj1463 Strategic game[树形DP]
    CH5E02 [IOI1999]花店橱窗[暴力dp]
    CH5E01[NOIP2010] 乌龟棋[暴力]
    CH5702 Count The Repetitions[倍增dp]
    P1081 [NOIP2012]开车旅行[倍增]
  • 原文地址:https://www.cnblogs.com/yuemengke/p/2977698.html
Copyright © 2020-2023  润新知