ajax的四种请求方式load()、 $.get() 、$.post() 、 $.ajax()

最新推荐文章于 2023-10-25 18:32:19 发布

困在雨天

最新推荐文章于 2023-10-25 18:32:19 发布

阅读量496

点赞数

分类专栏： ajax 文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/weixin_44106237/article/details/126413122

版权

ajax 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

一、load()

很少使用

对象.load(url,data,function (responseText, status, xhr){})

方法从服务器加载数据，并把返回的数据放入被选元素中。只能用于get请求

url:地址

data:传递数据

responseText：服务端返回的数据

status：状态 success/error

xhr:ajax对象

二、 $.get()

一般不用

$.get() :只能用于get方法请求

$.get(url,params,function(data,status){})

data:返回的数据 status:状态

<body>
  <h1>在输入框中尝试输入字母 a:</h1>
  <div>
    <label for="">请输入：</label>
    <input type="text" id="text"/>
  </div>
  <p><span>提示信息：</span><span id="info"></span></p>
</body>

  
$('#text').keyup(function(){
    $.get('getHead.php?q=' + $('#text').val(),function(data,status){
      if(status=='success'){
        // console.log(data);
        $("#info").text(data)
      }
    })
  })

三、$.post()

一般不用

$.post() :只能用于post方法请求

$.post(url,params,function(data,status){})

data:返回的数据 status:状态

<body>
  <form action="" method="get">
    <div>
      <label for="">姓名：</label>
      <input type="text" name="" id="user" />
    </div>
    <div>
      <label for="">密码：</label>
      <input type="password" name="" id="pwd" />
    </div>
    <input type="button" value="登录提交" id="login"/>
  </form>
  <div id="box"></div>
</body>


 $('#login').bind('click',function(){
        
$.post('tt_post.php','user='+$('#user').val()+'&pwd='+$("#pwd").val(),function(data,status){
      if(status=='success'){
        console.log(data);
        var data=JSON.parse(data)
        // $("#box").html('<p>姓名：'+data.user+'</p><p>密码：'+data.pwd+'</p>')
        $("#box").append('<p>姓名：'+data.user+'</p><p>密码：'+data.pwd+'</p>')

      }
    })
  })

四、$.ajax()

使用最多，基本上都使用这个方法

 $('#text').keyup(function(){
    $.ajax({
      url: 'getHead.ph?x=' + $('#text').val(), //地址
      type:'GET',//请求方式
      async:true,//是否异步
      data:"",//向后端传递的数据（body传参）
      // dataType:'text',//预计服务端返回的数据格式
      success:function(res){//请求成功后的回调函数
        console.log(res);
      },
      error:function(err){//请求失败后的回调函数
        console.log(err);
      },
      complete:function(data){//请求成功or失败后的回调函数
        console.log(data);
      } 
    })
  })