谈谈 ajax 的不同用法

1. $.ajax() 是jquery通用的一个ajax 封装,语法:$.ajax( 选项 ) , 选项是一个对象

常用参数:

  声明一个变量获取phone值:var xPhone = $('#xPhone').val();

  $.ajax({

    url:“a.php” ("/api/ser"),                //发送请求的地址

    data: { phone: xPhone,  name: $("#username").val() },   // data:{ 后台接口的参数名:页面获取到的变量 }

    type: 'post' ,                      //type默认是get  

    datatype: "json",                  // datatype 指定服务器返回的数据类型

    success: function(data){               // success 是请求成功后的回调函数 ,可以根据需要做一些判断操作

      console.log("请求成功了");

      if(data.ret_id === 200){

        alert("提交成功");

        window.location.href = "index.html";  // 页面重定向

      }

    },

    error: function(e){                //请求失败时调用

      console.log("服务器请求失败");

    }

  });

2. $.get() 使用get 方式进行ajax异步请求,语法: $.get(url  [,data]  [,callback] ),

  参数解释:url: ajax请求的地址。data: 可选参数,对象类型,发送到服务器的数据会显示在请求的url中。callback: 可选参数,ajax请求成功时自动调用该函数。

例子:status 状态码

  $.get("b.php", {phone: xPhone,  name: $("#username").val(), id: '111'}, function(data,status){

    console.log(data)

    if(status === 200){

      console.log("请求成功");    

    }else{

      console.log("请求失败");

    }

  });

3. $.post()  使用 post 方式进行ajax异步请求, 语法:$.post(url [,data ] [,callback][,type]), 比$.get()多了一个type参数

例子:表单提交的时候请求 ajax

  $("#form1").submit(function(e){

    e.preventDefault();  //阻止表单默认提交

   $.post("./js/a.json", {phone: xPhone, age: xAge}, function(data){

      if(data.ret_cd === 200){

        alert("留言成功");

      }else{

        alert("留言失败");

      }

   }, "json")            // type: 请求的数据类型(有html xml  json),设置为 json, 则返回的格式是json格式的,不设置默认和$.get()返回的一样,是字符串格式

})

4. $.getJSON(): 用于ajax获取json数据,语法: $.getJSON(url [,data] [,callback]) ,参数解释同$.get() $.post()

  $.getJSON可以通过把请求url写成"aaa.php?callback=X" , 让程序执行回调函数X。 

  缺点:发送的数据量不能太多,否则造成url太长接收失败

 

posted @ 2019-05-12 22:22  桑甚姑娘  阅读(167)  评论(0编辑  收藏  举报