jQuery_ajax 

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>

<body>
  <h2>jQuery的ajax</h2>
  <input class='get' type="button" value='get请求'>
  <input class='post' type="button" value='post请求'>
  <input class='ajax' type="button" value='ajax请求'>
  <input class='ajax_extend' type="button" value='$.ajax使用补充'>
</body>

</html>
<!-- 导入jQuery   -->
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
  //自己的js
  // get请求
  $('.get').click(function () {
    // $.get('../00.backData/01.backSendData.php','name=rose&husband=robot',function(data){
    //   alert(data);
    // })

    // 支持传入js对象
    $.get('../00.backData/01.backSendData.php',{name:'黑猫警长',skill:'抓老鼠'}, function (data) {
      alert(data);
    })
  })
  // post请求
  $('.post').click(function () {
    // 支持传入js对象
    $.post('../00.backData/01.backSendData.php',{name:'飞天小女警',skill:'自由飞翔'}, function (data) { 
      alert(data);
    })
  })

  // 可以自己选择 get 还是post
  $('.ajax').click(function(){
    $.ajax({
      url:'../00.backData/backXML.php',
      // type:'post',
      // date:'memeda',
      success:function(data){
        console.log(data);
      }
    })
  })

  // $.ajax使用补充
  $('.ajax_extend').click(function(){
    /*
      type 如果不设置 默认的请求方法是? get
        如果用get请求 那么 可以不写 type属性
      success
        在请求成功才会触发
        如果出现 服务器告诉浏览器返回的类型 跟 jQuery内部实际转换的类型不匹配 会无法触发
      error
        当请求出现问题 会触发这个回调函数
      complete
        请求完成会触发
    */
    $.ajax({
        // url:'../00.backData/01.backSendData.php',
        // data:{s
        //   name:'喜洋洋',
        //   skill:'卖萌'
        // },
        // url:'../00.backData/backXML.php',
        url:'../00.backData/backJSON.php',
        success:function(data){
          console.log(data);
        },
        // 形参可以改名字 这里直接使用默认的即可
        // 参数1 异步对象
        // 参数2 错误信息
        // 参数3 错在哪里
        error:function(XMLHttpRequest, textStatus, errorThrown){
          console.log('失败了哦');
          console.log(XMLHttpRequest);
          console.log(textStatus);
          console.log(errorThrown);
        },
        complete:function(){
          console.log('请求完成了');
        },
　　　　dataType:'jsonp' //如果后台人员忘记设置xml/jsonp数据的设置，通过该设置可以设置数据的编码格式
    })
  })
</script>

 

posted @ 2019-11-17 17:33  晴天宝宝i  阅读(122)  评论(0)    收藏  举报