AJAX

2021-04-08 14:34

阅读:598

YPE html>

技术图片
 $.ajax({
      url: ‘json.php‘,
      type: ‘get‘,
      // 设置的是请求参数
      data: { id: 1, name: ‘张三‘ },
      // 用于设置响应体的类型 注意 跟 data 参数没关系!!!
      dataType: ‘json‘,
      success: function (res) {
        // 一旦设置的 dataType 选项,就不再关心 服务端 响应的 Content-Type 了
        // 客户端会主观认为服务端返回的就是 JSON 格式的字符串
        console.log(res)
      }
    })
技术图片

 

常用选项参数介绍:

url:请求地址

type:请求方法,默认为 get

dataType:服务端响应数据类型 

contentType:请求体内容类型,默认 application/x-www-form-urlencoded

data:需要传递到服务端的数据,如果 GET 则通过 URL 传递,如果 POST 则通过请求体传递

timeout:请求超时时间

beforeSend:请求发起之前触发

success:请求成功之后触发(响应状态码 200)

error:请求失败触发

complete:请求完成触发(不管成功与否)

12.jsonp

JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法,常用于服务器与客户端跨源通信,在后来的Web服务中非常流行。

其原理就是在客户端借助 script 标签请求服务端的一个动态网页(php 文件),服务端的这个动态网页返回一段带有函数调用的 JavaScript 全局函数调用的脚本,将原本需要返回给客户端的数据传递进去。

JSONP
(){ 
        $.ajax({
             type: "get",
             async: false,
             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
             dataType: "jsonp",
             jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
             success: function(json){
                 alert(‘您查询到航班信息:票价: ‘ + json.price + ‘ 元,余票: ‘ + json.tickets + ‘ 张。‘);
             },
             error: function(){
                 alert(‘fail‘);
             }
         });
     });
     
     
  
  

 jquery在处理jsonp类型的ajax时(虽然jquery也把jsonp归入了ajax,但其实它们不是一回事儿),自动帮你生成回调函数并把数据取出来供success属性方法来调用。

 


评论


亲,登录后才可以留言!