Ajax-04 jQuery Ajax 常用操作

it2024-08-18  71

jQuery

jQuery 其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能。

 

jQuery Ajax

a.概述

  jQuery 不是生产者,而是大自然的搬运工

  jQuery Ajax 本质是 XMLHttpRequest 或 ActiveXObject

b.使用

  --- 下载导入jQuery(2.+ 版本不再支持IE9以下的浏览器)

 

jQuery Ajax常用操作

jQuery.ajax( url [, settings ] )

执行一个异步的HTTP(Ajax)的请求。

所有参数:

    url: 待载入页面的URL地址

  settings: 一个以"{键:值}"组成的AJAX 请求设置。所有选项都是可选的。如下:

     type:       请求方式,GET、POST

    headers:   请求头

    data:     要发送的数据

    contentType:  即将发送信息到服务器的内容编码类型(默认:"application/x-www-form-urlencoded;charset=UTF-8")

    async:    是否异步

    timeout: 设置请求超时时间(毫秒)

    

    beforeSend:发送请求前执行的函数

    complete:完成之后执行的回调函数

    success:成功之后执行的回调函数

    error: 失败之后执行的回调函数

 

    accepts:通过请求头发送给服务器,告诉服务器当前客户端可接受的数据类型

    dataType:将服务器端返回的数据转换成指定类型

        "xml":将服务器端返回的内容转换成xml格式

        "text":将服务器端返回的内容转换成普通文本格式

        "html":将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含javaScript 标签,则会尝试去执行。

        "script":将服务器端返回的内容转换成相应的JavaScript对象。

        "json":将服务器端返回的内容转换成json对象

        "jsonp":使用JSONP形式调用函数时,如"myurl?callback=?" jQuery将自动替换?为正确的函数名,以执行回调函数

 

jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

描述: 使用一个HTTP GET请求从服务器加载数据。

所有参数:

    url: 待载入页面的URL地址

   data: 待发送 key/value 参数

 success: 载入成功时回调函数

dataType: 从服务器返回的预期的数据类型,xml,json,script,text,html

 

 这是一个Ajax功能的缩写,这相当于:

$.ajax({ url: url, data: data, success: success, dataType: dataType });

 

实例1:返回内容为text时,dataType使用'text'

data.txt 文件:

name:"Milton",age:18

jq_get.html:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery get</title> </head> <body> <input type="submit" onclick="SendRequest();"/> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> function SendRequest() { jQuery.get({ url: 'data.txt', dataType: 'text', success: function (data, textStatus, xmlhttpRequest) { console.log(data, typeof data); console.log(textStatus); console.log(xmlhttpRequest); } }); } </script> </body> </html>

显示效果:

 实例2,返回内容为json字符串时,dataType使用'json'

data.txt 文件:

{"name":"Milton","age":18}

jq_get.html:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery get</title> </head> <body> <input type="submit" onclick="SendRequest();"/> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> function SendRequest() { jQuery.get({ url: 'data.txt', dataType: 'json', success: function (data, textStatus, xmlhttpRequest) { console.log(data, typeof data); console.log(textStatus); console.log(xmlhttpRequest); } }); } </script> </body> </html>

显示结果:

 

jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

描述: 使用一个HTTP POST 请求从服务器加载数据。

所有参数:

    url: 待载入页面的URL地址

   data: 待发送 key/value 参数

 success: 载入成功时回调函数

dataType: 返回内容格式,xml,json,script,text,html

 

这是一个 Ajax 函数的简写形式,这相当于:

$.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType });

 

jQuery.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )

使用一个HTTP GET请求从服务器加载JSON编码的数据。

所有参数:

    url: 待载入页面的URL地址

   data: 发送给服务器的字符串或Key/value键值对。

 success: 当请求成功后执行的回调函数。

 

这是一个Ajax函数的缩写,这相当于:

$.ajax({ dataType: "json", url: url, data: data, success: success });

 

jQuery.getScript( url [, success(script, textStatus, jqXHR) ] )

使用一个HTTP GET请求从服务器加载并执行一个 JavaScript 文件

所有参数:

    url: 待载入页面的URL地址

 success: 当请求成功后执行的回调函数。

 

这是一个Ajax函数的缩写,这相当于:

$.ajax({ url: url, dataType: "script", success: success });

 


***微信扫一扫,关注“python测试开发圈”,了解更多测试教程!***

转载于:https://www.cnblogs.com/guanfuchang/p/6639248.html

最新回复(0)