jQuery中的Ajax （六个Ajax的操作方法）细解！！！

最新推荐文章于 2024-05-16 02:23:50 发布

_筱龙

最新推荐文章于 2024-05-16 02:23:50 发布

阅读量2.6k

点赞数 3

文章标签： ajax jquery

本文链接：https://blog.csdn.net/IT_qslong/article/details/108433516

版权

jQuery中的Ajax

六个Ajax操作方法
- load()方法
- $.get()方法
- $.post()方法
- $.ajax()方法
- $.getScript()方法
- $.getJSON()方法

load()方法

load()方法的请求方式由是否传递参数决定。即传递参数，为GET方式;不传递参数，为POST方式。

```
load(url,data,callback）方法
```
- 参数
  - url - 异步请求的地址
  - data - 异步请求的数据
    - 如果省略请求数据的话，当前的请求方式为GET
    - 如果发送请求数据的话，当前的请求方式为POST
  - callback - 异步请求成功后的回调函数
- 返回值 - 服务器响应的结果
- 注意 - 自动将返回结果写入到目标元素中

<body>
    <button>按钮</button>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $('button').click(function(){
            $('button').load('data/server1.json',function(){
                console.log('异步请求成功')
            })
        })
    </script>
</body>

$.get()方法与 $.post()方法

$.get()方法使用get方式向服务器端发送异步请求
$.post()方法使用POST方式向服务器端发送异步请求

```
$.get(url,data,callback,type）方法 -- 请求方式为GET
$.post(url,data,callback,type）方法
```
- 参数
  - url - 异步请求的地址
  - data - 异步请求的数据
  - callback - 异步请求成功后的回调函数
  - type - 设置服务器满响应结果的格式
    - 值为xml、html、script、json、text和default
- 返回值 - 服务器响应的结果
- 注意 - 自动将返回结果写入到目标元素中

<button>按钮</button>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $('button').click(function(){
            $.get('data/server1.json',{name:'张无忌'},function(response){
                console.log(response)
            },'json')
            $.post('data/server1.json',{name:'张无忌'},function(response){
                console.log(response)
            },'json')
        })
    </script>

$.ajax()方法

$.ajax(方法是jQuery中最为底层的Ajax方法

```
$.ajax(url,[settings]）
```
- 参数
  - url-异步请求的地址
  - settings - 设置异步请求的参数
- settings选项 - 对象类型
  - type - 设置请求方式
  - data - 发送给服务器端的请求数据
  - dataType - 服务器端响应结果的格式
  - success - 异步请求成功后的回调函数
    - function(data,textStatus,jqXHR){}
      - data - 表示服务器端响应的结果
      - textStatus - 表示服务器端当前的状态
      - jqXHR - Ajax中的核心对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax方法</title>
</head>
<body>
    <button>按钮</button>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $('button').click(function(){
            $.ajax('data/server1.json',{
                type:'get',
                success:function(data){
                    console.log(data)
                }
            })
        })
    </script>
</body>
</html>

$.getSacipt()方法

$.getScript方法是jQuery中用于动态加载指定JavaScript文件 – 目的就是提升js文件加载的速度

```
$.getScript(url,[callback]);
```
- url请求
  - JavaScript文件的ul地址。
- callback
  - 指定JavaScript文件成功加载后的回调函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>getScript</title>
</head>
<body>
    <button>按钮</button>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $('button').click(function(){
            $.getScript('data/server2.js',function(data){
                console.log(data)
                eval(data)
            })
        })
    </script>
</body>
</html>

$.get.JSON()方法

$.getJSON()方法是jQuery中用于动态加载指定JSON格式的数据内容 – 请求只能用GET

```
$.getJSON(url,[data],[callback]);
```
- url
  - 请求JavaScript文件的url地址。
- data
  - 发送给服务器端的key/value形式的数据内容。
- callback
  - 指定JavaScript文件成功加载后的回调函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>getJSON</title>
</head>
<body>
    <button>按钮</button>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $('button').click(function(){
            $.getJSON('data/server1.json',{name:"林俊杰"},function(data){
                console.log(data)
                
            })
        })
    </script>
</body>
</html>

_筱龙

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的Ajax （六个Ajax的操作方法）细解！！！

jQuery中的Ajax六个Ajax操作方法load()方法$.get()方法$.post()方法$.ajax()方法$.getScript()方法$.getJSON()方法load()方法load()方法的请求方式由是否传递参数决定。即传递参数，为GET方式;不传递参数，为POST方式。load(url,data,callback）方法参数url - 异步请求的地址data - 异步请求的数据如果省略请求数据的话，当前的请求方式为GET如果发送请求数
复制链接

扫一扫