jquery ajax菜鸟教程;jquery ajax 收藏 0

Jquery实现Ajax请求的几种常见方式总结

1.1、JQuery的GET方式实现AJAX

核心语法：$.get(url,[data],[callback],[type]);

url：请求的资源路径。

data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。

callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

代码实现

1.2、JQuery的POST方式实现AJAX

核心语法：$.post(url,[data],[callback],[type]);

url：请求的资源路径。

data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。

callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

代码实现

1.6、JQuery的通用方式实现AJAX

核心语法：$.ajax({name:value,name:value,…});

url：请求的资源路径。

async：是否异步请求，true-是，false-否 (默认是 true)。

data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。

type：请求方式，POST 或 GET (默认是 GET)。

dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

success：请求成功时调用的回调函数。

error：请求失败时调用的回调函数。

代码实现

1.7、小结

AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。

通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部 分内容进行局部更新。

同步和异步

同步：服务器端在处理过程中，无法进行其他操作。

异步：服务器端在处理过程中，可以进行其他操作。

GET 方式实现：$.get();

POST 方式实现：$.post();

url：请求的资源路径。

data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。

callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

通用方式实现：$.ajax();

url：请求的资源路径。

async：是否异步请求，true-是，false-否 (默认是 true)。

data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。

type：请求方式，POST 或 GET (默认是 GET)。

dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

success：请求成功时调用的回调函数。

error：请求失败时调用的回调函数。

手把手带你快速入门jQuery（建议收藏！！！）

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器，并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

搭配视频效果更佳哦~~~

https://www.ixigua.com/6846624275877593611

jQuery 是一款跨主流浏览器的JavaScript 库，封装了JavaScript 相关方法调用，简化JavaScript 对HTML DOM 操作

官网地址： https://jquery.com/

官网首页jQuery 介绍：

原文翻译：

jQuery 是一个快速，小巧，功能丰富的JavaScript 库。 它通过易于使用的API 在大量浏览器中运行，使得HTML 文档遍历和操作，事件处理，动画和Ajax 变得更加简单。 通过多功能性和可扩展性的结合，jQuery 改变了数百万人编写JavaScript 的方式。

非常重要的理由就是：它能够兼容市面上主流的浏览器， IE 和FireFox， Google 浏览器处理 AJAX，创建异步对象是不同的，而jQuery 能够使用一种方式在不同的浏览器创建AJAX 异步对象。

其他优点：

（1） 写少代码,做多事情【write less do more】

（2） 免费，开源且轻量级的js 库，容量很小

（3） 兼容市面上主流浏览器，例如 IE，Firefox，Chrome

（4） 能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果， 也能提供异步AJAX 功能

（5） 文档手册很全，很详细

（6） 成熟的插件可供选择，多种js 组件，例如日历组件（点击按钮显示下来日期）

（7） 出错后，有一定的提示信息

（8） 不用再在html 里面通过<script>标签插入一大堆 js 来调用命令了

例如：使用JavaScript 定位DOM 对象常用的三种方式：

（1） 通过ID 属性：document.getElementById()

（2） 通过 class 属性：getElementsByClassName()

（3） 通过标签名：document.getElementsByTagName()

上面代码可以看出JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出错。jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法。

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。

通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。

官网下载地址：https://jquery.com/download/

jQuery 的不同版本中，2.xx 不再支持 IE6/7/8 浏览器。现阶段IE6/7/8 已经是淘汰的，非主流。可以不用考虑兼容问题。

对于每一个同一版本号的 jQuery，其库又分为两个。一个是未压缩版，可查看源码，开发时使用；一个是压缩版，将注释、空格均做了删除，将变量字符数减少，产品上线时使用。

编写jQuery 的工具很多，能编写HTML 的工具都支持jQuery. 例如记事本 ，EditPlus, webStorm, Visual Studio Code , HBuilder , HBuilderX , IDEA.

单独学习jQuery 库使用，可以轻量的开发工具，例如EditPlus ,HBuilder,HbuilderX

编写项目可以使用集成开发工具，例如在IDEA， Eclipse ,MyEclipse ,WebStorm 等

第一个例子完成：浏览器完全装载html 页面 DOM 后,显示一个提示信息框

实现步骤：

1. 使用HBuilder 或HbuilderX, idea 都可以，以HbuilderX 为工具，创建一个项目（名称：jquery-course），给项目选择一个文件存放目录。

2. 在项目中再创建一个目录

右键项目名称—新建—目录，常用名称为 js

3. 拷贝下载的jQuery.js 文件到目录

4. 使用 jQuery，首先要将 jQuery 库引入。使用如下语句：

<script type=\”text/javascript\” src=\”js/jquery-3.4.1.js\”></script>

5. $(document)，将 DOM 对象 document 转换为jQuery 对象。

$(document).ready()函数是当 DOM 对象加载完毕后，马上执行的函数。

$(document).ready()与$()、jQuery()、window.jQuery()是等价的，所以

$(document).ready()可以写成 $(function() { alert(“Hello jQuery”) } );

6. 完整代码

DOM 对象是用JavaScript 语法创建的对象，也看做是 js 对象。

使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象， 转换为jQuery 对象才可以使用jQuery 中的提供的方法，操作DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。

例：新建html 页面文件 domTojQuery.html

1. 页面加入按钮 button

2. 转换 DOM 对象

jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应 的 DOM

对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]

例：新建html 文件 jQueryToDom.html

1. 页面添加 text ，button

2. jQuery 对象.get(0) 或 jQuery 对象[0] 均可完成 jQuery 对象转 DOM对象

选择器: 就是定位条件；通知jquery 函数定位满足条件的DOM 对象

根据ID，class 属性，标签类型名定位HTML 元素，转为jQuery 对象.

1. id 选择器

语法：$(“#id”)

2. class 选择器

语法：$(“.class 名称”)

3. 标签选择器

语法：$(“标签名”)

例：新建selector.html

1. 在页面 head 部分加入 css

2. 加入 jQuery 引用

3.body 部分定义div

4.创建 js 函数

4. 所有选择器

语法：$(“*”) 选取页面中所有DOM 对象。

5. 组合选择器

组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id， class，标签名等。

语法：$(“#id, .class, 标签名”)

例：

1. 上面的 selector.html 页面中加入按钮

2. 增加 js 函数

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的

<input type=\”text\”>

<input type=\”password\”>

<input type=\”radio\”>

<input type=\”checkbox\”>

<input type=\”button\”>

<input type=\”file\”>

<input type=\”submit\”>

<input type=\”reset\”>

$(\”:tr\”): 不能用，tr 不是input 标签语法： $(\”:type 属性值\”)

例如：

$(\”:text\”)选取所有的单行文本框

$(\”:password\”)选取所有的密码框

$(\”:radio\”)选取所有的单选框

$(\”:checkbox\”)选取所有的多选框

例：

新建form.html 页面定义元素：

定义 js 函数：

jQuery 对象中存储的DOM对象顺序与页面标签声明位置关系

<div>1</div> dom1

<div>2</div> dom2

<div>3</div> dom3

$(\”div\”) == [dom1,dom2,dom3]

过滤器就是过滤条件，对已经定位到数组中DOM 对象进行过滤筛选，过滤条件不能独立出现在jquery 函数，如果使用只能出现在选择器后方。

1. 选择第一个first, 保留数组中第一个DOM 对象

语法：$(“选择器:first”)

2. 选择最后个last, 保留数组中最后DOM 对象

语法：$(\”选择器:last\”)

3. 选择数组中指定对象

语法：$(“选择器:eq(数组索引)”)

4. 选择数组中小于指定索引的所有DOM 对象

语法：$(“选择器:lt(数组索引)”)

5. 选择数组中大于指定索引的所有DOM 对象

语法：$(“选择器:gt(数组索引)”)

1.定义样式

2. 页面加入div

3. 定义js 函数

1. 选择可用的文本框

$(“:text:enabled”)

2. 选择不可用的文本框

$(“:text:disabled”）

3. 复选框选中的元素

$(“:checkbox:checked”)

4. 选择指定下拉列表的被选中元素

选择器>option:selected

例：

创建filterForm.html 页面：

js 函数

AJAX教程

关注我，带你了解java

一、AJAX简介

1.什么是AJAX？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。ajax 中使用的技术有JavaScript, html , dom , xml ,css 等。主要是 JavaScript , XML.

JavaScript:：使用脚本对象 XMLHttpRequest 发送请求， 接收响应数据

XML：发送和接收的数据格式，现在使用 json

AJAX 不单需要前端的技术，同时需要后端（服务器）的配合。服务器需要提供数据，数据是 AJAX 请求的响应结果。

2.原生JS实现AJAX

代码实现：

网页代码：

注释：

1. open(method, url, async) 方法需要三个参数:

　 method：发送请求所使用的方法（GET或POST）；与POST相比，GET更简单也更快，并且在大部分情况下都能用；然而，在以下情况中，请使用POST请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

　url：规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)；

　async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。

2. send() 方法可将请求送往服务器。

3. onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

4. readyState：存有服务器响应的状态信息。

0: 请求未初始化（代理被创建，但尚未调用 open() 方法）

1: 服务器连接已建立（open方法已经被调用）

2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）

3: 请求处理中（下载中，responseText 属性已经包含部分数据）

4: 请求已完成，且响应已就绪（下载操作已完成）

5. responseText：获得字符串形式的响应数据。

6. setRequestHeader()：POST传数据时，用来添加 HTTP 头，然后send(data)，注意data格式；GET发送信息时直接加参数到url上就可以，比如url?a=a1&b=b1。

PS：Fetch polyfill 的基本原理是探测是否存在window.fetch方法，如果没有则用 XHR 实现。

3.JQuery的三种方式实现AJAX：

3.1 $.ajax()

该方法用于执行Ajax请求，常用于其他jQuery Ajax方法不能完成的请求，也许我们可以把它称为\”jQuery中Ajax系列方法之母\”。

1.url：链接地址，字符串表示

2.data：需发送到服务器的数据，GET与POST都可以，格式为{A: ‘…’, B: ‘…’}

3.type：“POST” 或 “GET”，请求类型

4.timeout：请求超时时间，单位为毫秒，数值表示

5.cache：是否缓存请求结果，bool表示

6.contentType：内容类型，默认为\”application/x-www-form-urlencoded\”

7.dataType：服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json

8.success：请求成功后，服务器回调的函数

9.error：请求失败后，服务器回调的函数

10.complete：请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用

11.async：是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行

3.2 $.get()

$.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。

语法：

参数介绍：

发起不带参数的请求时，直接提供请求的 URL 地址和请求成功之后的回调函数即即可

发起带参数的请求时，以参数对象的形式添加第二个参数

3.3 $.post()

jQuery 中 $.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。

语法：

参数介绍：

使用 $post() 向服务器提交数据

星辰大海，永不止步

END

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com