ajax

游鹄君2025年8月24日大约 1 分钟

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ajax</title>
  <script type="text/javascript" src='jquery-1.8.3.min.js'></script>
</head>
<body>
  <button>get方式</button>
  <button>post方式</button>
  <button>ajax通用方式异步</button>
  <button>ajax通用方式同步</button>
  
  <script type="text/javascript">
  //get方式
  $('button').eq(0).click(function(){
    //alert(1234);
    //1.参数 服务器的地址脚本
    //2.参数  参数
    //3.参数  回调函数  data 是服务器返回的结果 
    //4可选参数 'json' 解析返回的json字符串
    $.get('2ajax_get.php',{id:100,name:'www'},function(data){
     //console.log(data);
     //第一种方法
     //eval('var arr ='+data);
     //console.log(data);
 
     //第二种方法 JSON.parse();
     /*JSON.parse(data);
     console.log(data);*/
 
     //第三种方法 可选参数
     console.log(data);
     console.log(data.id);
     console.log(data.name);
 
 
    },'json')
  })
 
  //post方式
  $('button').eq(1).click(function(){
 
    $.post('2ajax_post.php',{id:20,pid:100},function(data){
       console.log(data);
       console.log(data.id);
       console.log(data.pid);
    },'json')
  })
 
  //ajax 通用方式 异步
  $('button').eq(2).click(function(){
    $.ajax({
     url:"2ajax_self.php",
     data:"id=30&&name=shuang",
     dataType:'json',
     type:"GET",
     success:function(data){
 
         consol.log(data);
     },
     error:function(){
       alert('error');
     },
     timeout:3000,
     async:true
 
    })
    
  })
 
  //ajax 通用方式 同步
  var i=100;
  $('button').eq(3).click(function(){
    $.ajax({
     url:"2ajax_self.php",
     data:"id=30&&name=shuang",
     //dataType:'json',
     type:"GET",
     success:function(data){
         console.log(i=i + parseInt(data));
     },
     error:function(){
       alert('error');
     },
     timeout:3000,
     async:false
 
    })
    alert(i);
  })
  </script>
</body>
</html>

php

2ajax_get.php

<?php
 
//echo 12345;

echo json_encode($_GET);

2ajax_post.php

<?php
 
  echo json_encode($_POST);

2ajax_self.php

<?php
//异步
//echo json_encode($_GET);

//同步
echo '100abc';