[Ajax] jQuery中的Ajax -- 01-jQuery中的Ajax

jQuery中的Ajax

参考文档

jQuery中的Ajax

六个Ajax操作方法
- load()方法
- $.get()方法
- $.post()方法
- $.ajax()方法
- $.getScript()方法
- $.getJSON(方法
六种事件
- ajaxStart()
- ajaxStop()事件
- ajaxComplete()事件
- ajaxSend()事件
- ajaxError()事件
- ajaxSuccess()事件

load()方法

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button>按钮</button>
<script  src="js/js/jquery-1.12.4.js"></script>
<script>$('button').click(function () {$('button').load('./data./server2.txt',{name:'张无忌'},function () {console.log('异步请求成功');})})
</script>
</body>
</html>

$.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
- 返回值 - 服务器响应的结果
- 注意 - 自动将返回结果写入到目标元素中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button>按钮</button>
<script  src="js/js/jquery-1.12.4.js"></script>
<script>$('button').click(function () {$.get('data/server2.json',{name:'张无忌'},function (response) {console.log(response);},'json')$.post('data/server2.json',{name:'张无忌'},function (response) {console.log(response);},'json')})
</script>
</body>
</html>

$.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"><title>Title</title>
</head>
<body>
<button>按钮</button>
<script  src="js/js/jquery-1.12.4.js"></script>
<script>$('button').click(function () {$.ajax('data./server2.json', {type : 'get',dataType : 'text',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"><title>Title</title>
</head>
<body>
<button>按钮</button>
<script  src="js/js/jquery-1.12.4.js"></script>
<script>$('button').click(function () {// 动态加载指定JavaScript文件，并且执行$.getScript('./data/server3.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"><title>Title</title>
</head>
<body>
<button>按钮</button>
<script  src="js/js/jquery-1.12.4.js"></script>
<script>$('button').click(function () {// getJSON（）方法的请求方式为GET$.getJSON('./data/server2.json',{name:"张无忌"},function (data) {console.log(data)})})
</script>
</body>
</html>

[Ajax] jQuery中的Ajax -- 01-jQuery中的Ajax相关推荐

ajax点击更改div,jquery ajax双击div可直接修改div中的内容
jquery ajax双击div可直接修改div中的内容发布于 2017-04-03 17:26:16 | 127 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框 ...
深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法
当我们用javascript写ajax程序写得很"开心"的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和HttpRequest是多么的快乐,同时你再也不需要再烦恼 ...
jQuery框架学习第六天：jQuery中的Ajax应用
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现A ...
jquery ajax和servlet,浅谈ajax在jquery中的请求和servlet中的响应
在jsp中,首先,你需要导入jquery的架包: 获取可返回站点的根路径: String path = request.getContextPath(); %> 在jquery中写ajax请求: ...
ajax请求中带判断语句例子,jQuery中借助deferred来请求及判断AJAX加载的实例讲解...
ajax请求异步队列加载我们在开发程序的时候通常会碰到使用ajax加载数据显示到列表的情况.ajax默认使用异步加载(async:true).为什么不使用同步呢,因为ajax同步加载会UI渲染线程阻塞 ...
jQuery与Ajax 面试题库（长期更新中...）
jQuery 部分: JavaScript 是客户端脚本的标准语言,而 jQuery 使得编写 JavaScript 更加简单.你可以只用写几行的jQuery 代码就能实现更多的东西. 它是最长被用到 ...
通过Ajax获取数据并显示在表格中（原生Ajax，JQuery，Bootstrap，模板引擎）
需求页面上有一个"获取"按钮.当点击按钮时,从后端获取数据,并通过表格显示在页面上. 环境 Ubuntu 22.04 VSCode 1.67.2 jQuery v3.6.0 Bo ...
用jQuery作为JS对象从选项中添加选项的最佳方法是什么？
使用jQuery从JavaScript对象向<select>添加选项的最佳方法是什么? 我正在寻找不需要插件的东西,但是我也对那里的插件感兴趣. 这是我所做的: selectValues ...
ajax php加载列表实例,jQuery+PHP+ajax实现加载更多内容列表
我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文我 ...
超强1000个jquery极品插件！（连载中。。。。最近更新20090710）
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...

[Ajax] jQuery中的Ajax -- 01-jQuery中的Ajax

jQuery中的Ajax

jQuery中的Ajax

load()方法

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

$.ajax()方法

$.getSacipt()方法

$.get.JSON()方法

[Ajax] jQuery中的Ajax -- 01-jQuery中的Ajax相关推荐

最新文章

热门文章