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

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>

jQuery中的Ajax （六个Ajax的操作方法）细解！！！相关推荐

jquery中的ajax请求的基本使用以及登陆注册不刷新页面的例子/jquery中get、post以及ajax的使用/运用jQuery实现登陆注册案例
1.登陆注册案例: index.html代码: <!DOCTYPE html> <html lang="en"> <head><meta ...
Jquery中使用select2插件实现ajax实时请求数据
场景效果 select2相关 select2官网: https://select2.org/ 实现引入select2 页面中需要引入select.full.min.js和select2.min.c ...
jQuery中$.get()、$.post()和$.ajax()
1.jQuery.get()方法 $.get(url,data,success(response,status,xhr),dataType) 该函数是简写的 Ajax 函数,等价于: [javascr ...
[Ajax] jQuery中的Ajax -- 01-jQuery中的Ajax
jQuery中的Ajax 参考文档 jQuery中的Ajax 六个Ajax操作方法 load()方法 $.get()方法 $.post()方法 $.ajax()方法 $.getScript()方法 $ ...
在jquery中使用AJAX
在jquery中使用封装好的AJAX会对开发效率起到极大的便利,因此掌握jquery中的一系列AJAX封装函数是做好页面数据交互的必备技能: 1.在之前,我们首先需要详细了解AJAX异步请求接受的五中 ...
jQuery 中的 Ajax
jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript ...
如何显示jQuery中的加载微调器？
在原型中,我可以使用以下代码显示"正在加载..."图像: var myAjax = new Ajax.Request( url, {method: 'get', parameter ...
jq获取页面高度_使用jquery中height()方法获取各种高度
$(window).height(); //浏览器当前窗口可视区域高度 $(document).height(); //浏览器当前窗口文档的高度 $(document.body).height();/ ...
第六章 jQuery中的Ajax应用
第六章 jQuery中的Ajax应用 1.Ajax:客户端javascript所发起的http请求的代号,无刷新的数据更新. 2.编程模型: (1).同步代码:按钮按下执行耗时操作等待执行返回 ...

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

jQuery中的Ajax

load()方法

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

$.ajax()方法

$.getSacipt()方法

$.get.JSON()方法

jQuery中的Ajax （六个Ajax的操作方法）细解！！！相关推荐

最新文章

热门文章

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

jQuery中的Ajax

load()方法

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

$.ajax()方法

$.getSacipt()方法

$.get.JSON()方法

jQuery中的Ajax （六个Ajax的操作方法） 细解！！！相关推荐

最新文章

热门文章

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

jQuery中的Ajax （六个Ajax的操作方法）细解！！！相关推荐