整合AJAX

時間 2019-11-26
標籤整合 ajax 欄目 Ajax 简体版
原文原文鏈接
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <script language="JavaScript" src="../js/jquery-1.3.1.js"></script>
 <style type="text/css">
    div,span{
       width: 140px;
       height: 140px;
       margin: 20px;
       background: #9999CC;
       border: #000 1px solid;
    float:left;
       font-size: 17px;
       font-family:Roman;
   }
   
   div.mini{
       width: 30px;
       height: 30px;
       background: #CC66FF;
       border: #000 1px solid;
       font-size: 12px;
       font-family:Roman;
   }
   
   div.visible{
    display:none;
   }
  </style>
  <!--引入jquery的js庫-->
    
 </head>
  
 <body>
  <form action="" name="form1" id="form1">
   <input type="text" name="username" id="username" value="zhang"><br>
   <input type="text" name="psw" id="psw" value="99999"><br>
         <input type="button" id="b1" value="登錄">
  </form>
 
  <div id="one">  
  </div>
 
  
 </body>
   <script language="JavaScript">
   $(document).ready(function(){
  
  //load的get方式提交
/*  $('#b1').click(function(){
   
   //使用jquery提供的方法來發出ajax的請求
   //1.第一個參數表示把ajax請求發送給url
   //2.第二個參數表示是否發送數據data ,若是你要發送則數據的格式應當是 "{'username':'順平'}";
   //若是你不發送數據，則填入null , 若是你發送有數據給服務器文件,默認load方法是以post方式提交
   //不然是以get方式提交
   //3.第三個參數是函數(回調函數)
   //data表示從服務器回送的數據(string)
   //textStatus表示狀態有四個succuss, error, notmodify, timeout 
   //xmlHttpRequest表示XMLHttpRequest對象
   $('#one').load("loadController.php?date"+Math.random()+"&username="+$('#username').val(),null,function(data,textStatus,xmlHttpRequest){
    
    //alert("服務器返回"+data);
    $(this).text(data);
   });
   
  })*/
  
  //客戶端發送json ,以post方式
  //服務器端回送的text
 /* $('#b1').click(function(){
   
   //使用jquery提供的方法來發出ajax的請求
   //1.第一個參數表示把ajax請求發送給url
   //2.第二個參數表示是否發送數據data ,若是你要發送則數據的格式應當是 "{'username':'順平'}";
   //若是你不發送數據，則填入null , 若是你發送有數據給服務器文件,默認load方法是以post方式提交
   //不然是以get方式提交
   //3.第三個參數是函數(回調函數)
   //data表示從服務器回送的數據(string)
   //textStatus表示狀態有四個succuss, error, notmodify, timeout 
   //xmlHttpRequest表示XMLHttpRequest對象
   
   var send_data={"username":$("#username").val(),"psw":$("#psw").val()};  //json數據格式
   
   $('#one').load("loadController.php",send_data,function(data,textStatus,xmlHttpRequest){
    
    //alert("服務器返回"+data);
    //alert(data);
    
    
    //如服務器端返回的數據格式是json格式，則應當怎樣處理
    
   // var obj=eval("("+data+")");
   // window.alert(obj.res+" "+obj.info);
    
    
    //若是服務器返回的數據格式是xml格式的
    var result=xmlHttpRequest.responseXML;
    //取出返回的res
    var res=result.getElementsByTagName('res');
    window.alert(res[0].childNodes[0].nodeValue);
    
    //jquery
    //思考
   });
   
  })*/
  
  //使用$.post方法=>你本身就知道怎樣使用$.get方法.
  //這個方法不依賴於一個jquery對象.
  //第一個參數表示向哪一個php頁面發送請求.
  $('#b1').click(function(){
   var send_data={"username":$("#username").val(),"psw":$("#psw").val()};
   var xmlHttpRequest=$.post("loadController.php",send_data,function(data,ts){
   
    //若是服務器返回的是text
    //alert(data);
    //若是服務器返回的是json格式
   // var objs=eval("("+data+")");
    //若是不轉，objs是dom對象集合
   // var $objs=$(objs);//jquery對象集合
    //$objs表示[{'res':'不能夠用','info':'哈哈'},{'res':'不uu','info':'哈哈uu'}]
   // $objs.each(function(){
   //  alert(this.res+this.info);
   // })
    
    //xml格式->dom
    var xmlObjs=xmlHttpRequest.responseXML;
    //dom方法來解析
    var res=xmlObjs.getElementsByTagName('res');
    alert(res[0].childNodes[0].nodeValue);
    
   })
  })
  
   });
  </script>
   
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。