zoukankan      html  css  js  c++  java
  • ajax.完整案例

    php写法
    <?php
    $id $_GET['id'];
    if($id==1){
          $arr['name'] = "三只松鼠";
          $arr['money'] = 100;
          $arr['guige'] = "3袋装";
          $arr["love"] = 1;
          $arr["srcc"]="img7_03.png";
    echo json_encode($arr);
    }else {
          $arr "请输入id";
    }
    ?>
     
     
    <!DOCTYPEhtml>
    <html>
          <head>
                <meta charset="UTF-8">
                <title></title>
          </head>
          <body>
                <div class="" id="box">
                <img src="" alt="" />
                <class="p1">姓名</p>
                <class="p2">钱</p>
                <class="p3">规格</p>
                <class="p4">爱</p>
                <button>点击按钮</button>
                <href=""></a>
                </div>
          
          </body>
          <script type="text/javascript">
          var p1=document.querySelector(".p1");
          var p2=document.querySelector(".p2");
          var p3=document.querySelector(".p3");
          var p4=document.querySelector(".p4");
          var btn=document.querySelector("button");
          var imgs=document.querySelector("img");
          var ap=document.querySelector("a");
          
          
                //做兼容处理。创建新的对象   http://www.jb51.net/article/23175.htm
                if(window.XMLHttpRequest){
                      //创建新的对象
                      var ajax = new XMLHttpRequest();
                }else{
                      var ajax = new ActiveXObject();
                }
                
                btn.onclick=function(){
                             //打开,用什么方式获取, 文件有id写id,同步还是异步
                      ajax.open("GET","new_file.php?id=1",true);
                ajax.send(); /*发送数据*/
                
             
    /*ajax,当事件改变时当请求被发送到服务器时,我们需要执行一些基于响应的任务。*/
                ajax.onreadystatechange function(){
                      /*判断是否获取成功*/  http://blog.csdn.net/u013381651/article/details/51261956
                      if(ajax.readyState==4){ 
    每当 readyState 改变时,就会触发 onreadystatechange 事件。
                            if(ajax.status==200){
                                  //获取它的对象进行转换成整数*/
                                  var obj=JSON.parse(ajax.responseText);
                                  p1.innerHTML="姓名"+obj.name;
                                  p2.innerHTML="钱"+obj.money;
                                  p3.innerHTML="规格"+obj.guige;
                                  p4.innerHTML="爱"+obj.love;
                                     /*点的形式进行获取打印对象*/
                                 
                                  imgs.src=obj.srcc;
                                  /*a.href=obj.html;*/
                                  
    /*点的形式进行获取打印对象*/
                            }
                      }
                }
                      
                      
                }
                
          </script>
    </html>
  • 相关阅读:
    20162328蔡文琛 四则运算第一周
    实验三:实验报告
    20162328蔡文琛week09
    20162328蔡文琛week08
    20162328蔡文琛week07
    实验报告二
    20162312张家铖 10.9查找课堂测试
    20162312实验一
    # 20162312 2017-2018-3 《程序设计与数据结构》第3周学习总结
    # 20162312 2017-2018-1 《程序设计与数据结构》第1周学习总结
  • 原文地址:https://www.cnblogs.com/fengyuzhen34/p/9348370.html
Copyright © 2011-2022 走看看