首页 > 代码库 > Ajax-04 jQuery Ajax 常用操作

Ajax-04 jQuery Ajax 常用操作

2024-09-13 04:34:27   221人阅读

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
});

 

Ajax-04 jQuery Ajax 常用操作


联系
我们