jQuery从入门到应用：选择器、DOM与Ajax综合指南

---

前言

提示：这里可以添加本文要记录的大概内容：

jQuery对象

1、jQuery的使用

在需要使用jQuery的页面引入Js文件

在HTML文件中正确地引入jQuery库非常重要。以下是正确的做法：

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>

注：如果在使用jQuery对象时未引入jQuery的核心JS文件，则会报错 ($ is not defined)。

使用jQuery选择页面元素并获取其文本内容

$符号是jQuery函数的别名，相当于用于jQuery对象的引用， 选择元素以及执行各种DOM操作、事件处理等。

<div id="mydiv">hello</div>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">// 获取div元素var div = $("#mydiv"); // 正确的方式var div2 = jQuery("#mydiv"); // 也可以使用jQuery代替$，两者效果相同console.log(div.text()); // 输出div内的文本 "hello"
</script>

2、jQuery包装集与Dom对象

DOM与 jQuery对象转换

使用原生DOM方法以及 jQuery选择器来获取页面中的div元素。

DOM对象和jQuery对象的选择及互相转换

通过document.getElementById方法可以直接从DOM中选取元素。以下是正确的做法：

// 通过document获取div
var divDom = document.getElementById("mydiv");
console.log(divDom); // 输出的是一个原生的DOM元素对象// jQuery包装集对象：通过jQuery选择器获取div
var divJquery = $("#mydiv");
console.log(divJquery);console.log("==== jQuery包装集对象与DOM对象互相转换 ====");// 将DOM对象转换成jQuery对象，使用$()将dom对象括起来
var domToJquery = $(divDom);  // 使用$(domObject)来包裹DOM对象
console.log(domToJquery);  // 输出转换后的jQuery对象// 将jQuery对象转换成DOM对象，获取jQuery包装集对象的下标
var jqueryToDom = divJquery[0];   // 或者使用 divJquery.get(0)
console.log(jqueryToDom);   // 输出原始的DOM对象

当获取元素对象，元素不存在时，
通过document获取的值，返回null（通过判断返回值是否为null，来得知元素是否存在）
通过jQuery获取的值，返回空包装集（通过判断包装集的长度length，来得知元素是否存在，存在至少length为1）

---

jQuery对象

使用jQuery的选择器语法可以更方便地选取页面元素：

var divDom = document.getElementById("mydiv");
console.log(mydiv)// 通过jQuery选择器获取div
var div = $("#mydiv"); // 注意这里的$符号两边没有空格，且字符串要用英文双引号或单引号
console.log(div); // 输出的是一个jQuery对象，包含了匹配到的所有元素

关键点说明：

• 获取DOM对象：使用document.getElementById("mydiv")获取页面中id为"mydiv"的元素。
• 获取jQuery对象：使用$("#mydiv")选取相同的元素，但这次是作为jQuery对象返回。
• DOM对象转jQuery对象：使用$() 把DOM对象括起来：$(DOM对象)
• jQuery对象转DOM对象：可以使用.get(0)方法从jQuery对象中提取出对应的DOM对象。

jQuery选择器

1、基础选择器

选择器类型	使用方法	描述
id选择器	$("#id属性值")	获取指定id属性值的元素。如果出现多个同名id，只会获取第1个
类选择器	$(".class属性值")	获取指定class属性值的元素
元素选择器	$("标签名/元素名")	获取指定标签名的元素
通用选择器	$("*")	获取所有的元素
组合选择器	$("选择器1，选择器2...")	获取指定选择器选中的元素，多个选择器之间用逗号隔开

【示例代码】

注意：在下面的代码示例中，变量名为clas而非class，以避免与JavaScript保留字冲突。

<script type="text/javascript">// ID选择器  $("#id属性值")var mydiv1 = $("#mydiv1");console.log("ID选择器:", mydiv1);// 类选择器  $(".class属性值")var clas = $(".blue");console.log("类选择器:", clas);// 元素选择器   $("标签名/元素名")var divs = $("div");console.log("元素选择器:", divs);// 通用选择器   $("*")var all = $("*");console.log("通用选择器:", all);// 组合选择器  $("选择器1,选择器2,...")var group = $("#mydiv1, .blue, div");console.log("组合选择器:", group);
</script>

关键点说明

• 正确示例：$("#id属性值")

• 正确示例：var clas = $(".blue");

• 选择器使用：

  • ID选择器：通过#加上元素的ID来选取特定的元素。
  • 类选择器：通过.加上类名来选取所有具有该类的元素。
  • 元素选择器：直接使用标签名来选取页面上所有的该类型的元素。
  • 通用选择器：使用*来选取页面上的所有元素。
  • 组合选择器：通过逗号分隔不同的选择器，可以同时选取多个不同条件的元素。

2、层次选择器

选择器类型	连接符号	使用方法	描述
后代选择器	空格	$("指定元素 元素名")	获取指定元素的所有指定子元素（包含子元素及子元素的子元素）
子代选择器	大于号 >	$("指定元素 > 元素名")	获取指定元素的所有指定第一代子元素（只会选择第一级子元素）
相邻选择器	加号 +	$("指定元素 + 元素名")	获取指定元素的下一个指定元素（只会找一个元素）
同辈选择器	波浪号 ~	$("指定元素 ~ 元素名")	获取指定元素后面的所有指定元素

$(document).ready(function(){// 后代选择器（空格）var hd = $("#food li");console.log("后代选择器选中的元素：", hd);// 子代选择器（大于号 `>`）var zd = $("#food > li"); console.log("子代选择器选中的元素：", zd);// 相邻选择器（加号 `+`）var xl = $("#mydiv + div"); // 选择紧跟在#mydiv之后的divconsole.log("相邻选择器选中的元素：", xl);// 同辈选择器（波浪号 `~`）var tb = $("#mydiv ~ div"); // 选择#mydiv之后的所有同级divconsole.log("同辈选择器选中的元素：", tb);
});

关键点说明

• 后代选择器：使用空格 来表示后代选择器，它会选择指定元素内的所有匹配的后代元素。

  var hd = $("#food li");

• 子代选择器：使用大于号 > 来表示子代选择器，它只会选择直接子元素。

  var zd = $("#food > li");

• 相邻选择器：使用加号 + 来表示相邻选择器，它会选择紧接在另一个元素之后的某个元素。

  var xl = $("#mydiv + div");

• 同辈选择器：使用波浪号 ~ 来表示同辈选择器，它会选择位于同一个父元素下，并且在目标元素之后的所有匹配的兄弟元素。

  var tb = $("#mydiv ~ div");

3、表单选择器

jQuery提供了一些特殊的选择器用于选取表单内的特定元素。这里是一些常用的表单选择器：

• :input：匹配所有输入元素，包括<input>，<textarea>，<select>和<button>。
• :radio：匹配所有单选按钮。
• :checkbox：匹配所有复选框。
• :checked：匹配所有被选中的元素（适用于单选按钮和复选框）。
• :selected：匹配所有被选中的<option>元素。

格式：$(":类型")

<script type="text/javascript">// 选择所有输入元素var forms = $(":input");console.log(forms);// 仅选择<input>标签元素var inputs = $("input");console.log(inputs);// 获取所有的单选框var radios = $(":radio");console.log(radios);
</script>

4、选择器类型对比表

选择器	jQuery	描述
[属性名]	$([属性名]")	获取所有设置过指定属性名的元素
[属性名=‘属性值’]	$([属性名='属性值']")	获取所有设置过指定属性名为指定值的元素
:checked	$("checked")	获取选中状态为选中的元素（单选框与复选框）
:selected	$("selected")	获取选中状态为选中的元素（下拉框）
:gt(index)	$(":gt(index)")	获取下标大于指定值的元素
:eq(index)	$(":eq(index)")	获取下标等于指定值的元素
:odd	$(":odd ")	获取所有奇数下标
:even	$(":even")	获取所有偶数下标

【示例代码】

<script type="text/javascript">// [属性名]  $("[属性值]")var test = $("[name]");  //选择所有设置了name属性的元素console.log(test);// [属性名='属性值']   $([属性名='属性值']")var test2 = $("[name='ufav']");  //选择所有设置了name属性且值为'ufav'的元素console.log(test2);/* 获取name为'usex'的被选中的单选框 */// 注意此处应该是:checkedvar test3 = $(":radio[name='usex']:checked");console.log(test3);
</script>

Dom操作

1、操作元素的属性

关于attr()和prop()方法的描述：

分类	描述	attr() 方法	prop() 方法
设置属性	给元素设置属性值	对象.attr("属性名", "属性值");	对象.prop("属性名", "属性值");
获取属性	获取元素的属性值	var 属性值 = 对象.attr("属性名");	var 属性值 = 对象.prop("属性名");
区别	固有属性	可以操作元素本身就拥有的固有属性	可以操作元素本身就拥有的固有属性
布尔类型属性	如 checked, selected, disabled	可以操作，但不推荐用于布尔类型的属性	推荐使用，特别适合处理返回布尔值的属性
自定义属性	用户自己定义的属性	可以操作用户自定义的属性	不能操作用户自定义的属性

获取和设置固有属性

ck1和ck2代表复选框的id

// 获取属性 - 使用 attr()
var name1 = $("#ck1").attr("name");
console.log(name1); // 输出 ck1 的 name 属性值// 设置属性 - 使用 prop() 推荐用于布尔类型的属性
$("#ck2").prop("checked", true); // 设置为选中状态// 获取属性 - 使用 prop()
var name2 = $("#ck1").prop("name");
console.log(name2); // 输出 ck1 的 name 属性值// 设置属性 - 使用 attr()
$("#ck2").attr("checked", "checked"); // 不推荐用于布尔类型的属性// 设置属性 - 使用 prop()
$("#ck2").prop("checked", true); // 推荐用于布尔类型的属性

获取布尔类型的属性

// 获取布尔类型属性 - 使用 attr() （不推荐）
var cked1 = $("#ck1").attr("checked");
console.log(cked1); // 可能返回 'checked' 或 undefined，取决于是否选中// 获取布尔类型属性 - 使用 prop() （推荐）
var cked2 = $("#ck1").prop("checked");
console.log(cked2); // 返回 true 或 false

区别：

1. 固有属性：元素本身就拥有的属性，attr()和prop()都可以操作固有属性
2. 返回值是布尔类型的属性checked、selected、disabled、prop()操作返回值是布尔类型的属性
3. 自定义属性：用户自己定义的属性，attr()可以操作，prop()不可以操作

总结：如果属性的返回值是布尔类型，选择prop方法，否则使用attr方法

补充说明：attr() vs prop()

• 固有属性：指的是HTML标签本身所具备的属性，例如input标签的type、value等属性。对于这些属性，虽然attr()和prop()都可以操作，但对于布尔类型的属性（如checked），使用prop()更为合适。

• 布尔类型属性：这些属性反映了一个状态（真或假）。对于这类属性，使用prop()通常能得到更准确的结果，一个复选框是否被选中应该用prop('checked')来判断。

• 自定义属性：指用户通过data-*等方式添加到HTML标签上的额外属性。这类属性只能通过attr()方法来获取或设置。

• 固有属性：HTML标签本身具备的属性，如input的type、value等。对于布尔类型的属性（例如checked, selected, disabled），推荐使用prop()方法。

• 布尔类型属性：反映状态（真或假）。复选框是否被选中应使用prop('checked')来判断。

• 自定义属性：用户通过data-*方式添加的额外属性，这类属性只能通过attr()方法来获取或设置。

2、使用jQuery操作元素样式

1. 获取元素的样式类名

使用attr("class")可以获取元素的所有类名。

var classList = $("#elementId").attr("class");
console.log(classList); // 输出元素的所有类名

2. 设置元素的样式（覆盖原有样式）attr("class","样式名")

直接设置CSS属性会覆盖原有的样式值。

$("#elementId").css("color", "red"); // 将文本颜色设置为红色

3. 添加元素的样式（在原有基础上追加新的样式类）

使用addClass("样式名")方法可以在不移除原有类的情况下添加新的类。

$("#elementId").addClass("newClass"); // 添加一个名为 'newClass' 的新类

4. 添加具体的样式

添加一个或多个具体的样式规则。对于多个样式规则，可以传递一个对象给.css()方法。

5. 添加一个具体的样式：css("样式名","样式值")

  $("#elementId").css("background-color", "blue"); // 设置背景色为蓝色

6. 添加多个具体的样式：css({"样式名":"样式值","样式名":"样式值"})

  $("#elementId").css({"font-size": "20px", // 设置字体大小为20px"border": "1px solid black" // 设置边框样式});

7. 移除样式

使用removeClass("样式名")方法可以从元素中移除指定的类。

$("#elementId").removeClass("oldClass"); // 移除名为 'oldClass' 的类

如果要移除所有类，可以直接调用removeClass()而无需参数：

$("#elementId").removeClass(); // 移除所有类

这些方法提供了灵活的方式来操作HTML元素的样式，无论是通过直接修改样式属性还是通过添加、移除样式类。根据具体的需求选择合适的方法可以有效地控制页面元素的外观。

方法	说明
html()	获取元素的 html 内容
html("html,内容")	设置元素的 html 内容
text()	获取元素的 文本 内容，不包含 html
text("text,内容")	设置元素的 文本 内容，不包含 html
val()	获取元素的 value 值
val("值")	设定元素的 value 值

操作元素的内容：
val()操作表单元素的值
取值：var值=表单元素对象.val()；
赋值：表单元素对象.val(值)；

html()操作非表单元素的内容（包含html标签）
取值：var内容 = 对象.html()；
赋值：对象.html(内容)；

text()操作非表单元素的文本内容（不包含html标签）
取值：var内容=对象.text()；
赋值：对象.text(内容)；

获取元素的样式类名

var classList = $("#elementId").attr("class");
console.log(classList); // 输出元素的所有类名

设置元素的样式

直接设置CSS属性会覆盖原有的样式值：

$("#elementId").css("color", "red"); // 将文本颜色设置为红色

添加元素的样式

在不移除原有类的情况下添加新的类：

$("#elementId").addClass("newClass"); // 添加一个名为 'newClass' 的新类

移除样式

从元素中移除指定的类：

$("#elementId").removeClass("oldClass"); // 移除名为 'oldClass' 的类

如果想要移除所有类：

$("#elementId").removeClass(); // 移除所有类

3、操作元素的内容

方法	说明
html()	获取或设置元素的HTML内容
text()	获取或设置元素的文本内容，不包含HTML
val()	获取或设置表单元素的值

【示例代码】

<input type="text" name="uname" id="uname" value="oop" />
<div id="html"></div>
<div id="text"></div><script type="text/javascript">/* val() 操作表单元素的值 */// 通过原生 JavaScript 获取值console.log(document.getElementById("uname").value);// 使用原生 JavaScript 赋值document.getElementById("uname").value = "面向对象";// 通过 val 方式获取值console.log($("#uname").val());// 通过 val 方式获赋值$("#uname").val("面向对象");/* html() 操作非表单元素的内容（包含 HTML 标签） */// 赋值$("#html").html("Hello");$("#html").html("<h2>Hello</h2>");// 取值console.log($("#html").html());/* text()操作非表单元素的文本内容 (不包含html标签) */// 赋值$("#text").html("Hello");$("#text").html("<h2>Hello</h2>");// 取值console.log($("#html").text());
</script>

---

4、创建元素和添加元素

创建元素：$("元素标签")

// 定义html字符串
var htmlTxt = "<p>这是一个段落</p>"; 
console.log(htmlTxt); // 输出原始的HTML字符串// 将html字符串转换成jQuery对象
var htmlJquery = $(htmlTxt); 
console.log(htmlJquery); // 输出jQuery对象// 输出html字符串中的内容（即<p>标签内的文本）
console.log(htmlJquery.html()); // 输出<p>标签内的文本内容

添加元素

对象.before("内容")：前追加，在元素的同级追加，内容可以是对象、html或字符串
对象.after("内容")：后追加，在元素的同级追加，内容可以是对象、html或字符串
对象.prepend("内容")：在元素的内部最前面追加子元素，内容可以是对象、html或字符串
对象.append("内容")：在元素的内部最后面追加子元素，内容可以是对象、html或字符串
$("内容").prependTo(对象)：在元素的内部最前面追加子元素，内容可以是对象、html或字符串
$("内容").appendTo(对象)：在元素的内部最后面追加子元素，内容可以是对象、html或字符串

<span class="red">泰山</span>
<span class="blue">偶像</span>
<script type="text/javascript">
console.log("----- 同级追加 -----");// 得到目标对象var ts = $(".red");// 准备要追加的内容var span = "<span class='pink'>女神</span>";// 将内容追加到指定元素前面ts.before(span);// 将内容追加到指定元素后面ts.after(span);// 得到要追加的元素（已存在的元素）var blue = $(".blue");// 追加已有元素ts.before(blue);  // 在 .red 元素之前插入 .blue 元素ts.after(blue);   // 在 .red 元素之后插入 .blue 元素// 如果需要打印日志来确认操作结果console.log(ts);console.log($(".pink")); // 打印新添加的 span 元素console.log(blue);       // 打印 .blue 元素
</script>

添加元素时（同级添加和子元素添加）
如果元素不存在，则创建元素，并添加
如果元素存在，则会获取已存在的元素，并剪切到新的位置

<script type="text/javascript">
console.log("----- 子元素追加 -----");// 准备要追加的元素var sp = "<span>老腊肉</span>";var sp2 = "<span>小奶狗</span>";// prepend()：在选定元素的最前面追加子元素$(".green").prepend(sp);// append()：在选定元素的最后面追加子元素$(".green").append(sp2);// prependTo()：将新元素插入到选定元素的最前面$(sp).prependTo($(".green"));// appendTo()：将新元素插入到选定元素的最后面$(sp2).appendTo($(".green"));// 追加已存在的元素（例如带有 .blue 类的元素）$(".green").append($(".blue"));// 打印日志来确认操作结果console.log($(".green"));
</script>

5、删除元素

remove()：删除所选元素或指定的子元素，包括整个标签和内容一起删
empty()：清空所选元素的内容

// 删除class属性为green的元素
$(".green").remove(); // 清空元素（移除class属性为blue的元素内部的所有内容）
$(".blue").empty();

6、遍历元素each()

$(selector).each(function(index, element) ：遍历元素
参数function为遍历时的回调函数
index为遍历元素的下标，从0开始。
element是当前的元素，此时是dom元素。

$(".green").each(function(index, element) {// 'this' 是当前遍历到的DOM对象console.log(this); // 输出当前的DOM对象// 输出当前DOM对象的innerHTML属性，显示其内部HTML内容console.log(this.innerHTML);// 使用$(this)将DOM对象包装成一个jQuery对象，并输出其html内容console.log($(this).html());// 输出当前元素的下标（索引）console.log("下标：" + index);// 输出当前遍历到的DOM对象console.log(element);// 将当前的DOM对象转换为jQuery对象并输出console.log($(element));
});

jQuery事件

1、ready加载事件

ready()类似于onLoad()事件
ready()可以写多个，按顺序执行$(document).ready(function(){}) 
等价于 
$(function(){})

ready 加载事件（预加载事件），当HTML的文档结构加载完毕后执行

只有引入了JS文件才能用

格式：

$(document).ready(function(){});

简略版：

$(document).ready(function(){console.log("ready加载事件...");
});$(function(){console.log("ready加载事件2...");
});

onload加载事件（JS中提供的方法），当HTML的文档结构及引入的资源加载完毕后执行

window.onload=function() {
}

加载慢

window.onload = function() {console.log("load加载事件...");
};

2、绑定事件

• eventType：是一个对应的事件类型的字符串

1. 事件类型：

   • 点击事件：click
   • 聚焦事件：focus
   • 失去焦点事件（通常称为失效事件）：blur
   • 改变事件：change
   • 鼠标悬停事件：应为 mouseover 而不是 moueseover
   • 鼠标移开事件：mouseout

2. eventData：需要传递给事件处理程序的数据，参数格式是一个 JSON 对象，例如 {键: 值, 键: 值...}。

3. handler：当事件触发时执行的回调函数。

4. bind绑定事件（单个）：

    $(选择器).bind("事件名", function() {// 事件处理代码});

bind() 绑定事件语法：

$(selector).bind(eventType[,eventData],handler);

5. 绑定事件（多个）：

方式一：为某一个元素绑定不同的事件，执行不同的函数
$(选择器).bind("事件名1", function() {// 事件处理函数1
}).bind("事件名2", function() {// 事件处理函数2
});
方式二：为某一个元素绑定不同的事件，执行相同的函数（多个事件用空格隔开）
$(选择器).bind("事件名1 事件名2", function(event) {// 共享的事件处理逻辑console.log('触发了 ' + event.type + ' 事件');
});
方式三：为某一个元素绑定不同的事件，执行不同的函数（使用JSON对象格式）
$(选择器).bind({"事件名1": function() {// 事件处理函数1},"事件名2": function() {// 事件处理函数2}
});

如何绑定事件
1.事件源：确认给什么元素绑定事件，通过不同的选择获取对应的元素
2.事件类型：给元素绑定什么事件，常用的事件名
3.执行函数：当事件触发时需要执行的函数，匿名函数·或·自定义函数

---

6. on绑定事件（单个）

推荐使用 .on() 方法来绑定事件，而不是 .bind()。下面是使用 .on() 方法的示例：

$(选择器).on('事件名', [eventData], function(event) {// 事件处理代码
});

示例代码：

// 绑定点击事件
$('#myButton').on('click', function() {console.log('按钮被点击了');
});// 使用 eventData 传递额外数据
var eventData = { message: 'Hello World' };
$('#myButton').on('click', eventData, function(event) {console.log(event.data.message);  // 输出 "Hello World"
});

这样不仅使描述更加准确，还提升了文档的可读性和美观性。它更灵活且是较新版本的标准做法。

3、jQuery的.click()

方法1：直接在JavaScript中使用jQuery的.click()方法绑定事件

这种方法通过外部JavaScript代码为HTML元素绑定事件处理器。它不仅有助于保持代码的整洁性，还能使HTML页面更加简洁，不包含任何内联JavaScript代码。

<!-- HTML部分 -->
<button id="btnA">按钮A</button>
<button id="btn6">按钮B</button><!-- 确保正确引入jQuery库 -->
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">// 绑定单个点击事件到按钮A$("#btnA").click(function(){console.log("按钮A被点击了...");});// 为按钮B同时绑定多个事件（点击和鼠标移出）$("#btnB").click(function(){console.log("按钮B被点击了...");}).mouseout(function(){console.log("鼠标从按钮B移开了...");});
</script>

详细解释：

• $("#btnA")：首先通过jQuery选择器选中id为btnA的元素。
• .click(function(){...})：为该元素添加一个点击事件监听器。当用户点击按钮时，控制台会打印“按钮A被点击了…”。
• 对于#btnB，我们使用了链式调用的方式同时绑定了两个事件处理程序（点击和鼠标移出），这使得代码更加紧凑和易于阅读。

方法2：在HTML标记中直接使用内联事件处理程序

尽管这种方法简单直接，但它混合了内容与行为，不利于维护和扩展，因此通常不推荐用于大型项目或复杂的Web应用。

<!-- HTML部分 -->
<button onclick="console.log('按钮C被点击了...')">按钮C</button>

详细解释：

• onclick="console.log('按钮C被点击了...')"：直接在HTML标签中定义了一个点击事件处理器。这意味着每当用户点击这个按钮时，都会执行console.log('按钮C被点击了...')这段JavaScript代码。

额外提示：

1. 事件委托：如果需要对动态加载的内容进行事件绑定，可以考虑使用事件委托。

   $(document).on('click', '#dynamicBtn', function(){console.log('动态加载的按钮被点击了...');});

2. 避免重复绑定：确保不会多次绑定相同的事件处理函数给同一个元素，以免触发多次相同的行为。可以通过.off()方法解除之前的绑定，或者在绑定之前检查是否已经存在相应的事件处理器。

3. 使用.on()代替.bind()、.click()等：从jQuery 1.7开始，推荐使用.on()方法作为统一的事件绑定机制。

   $('#element').on('click', function() {console.log('元素被点击');});

Ajax

异步无刷新技术

原生Ajax的实现流程

1. 得到XMLHttpRequest对象

   var xhr = new XMLHttpRequest();
   

2. 打开请求

   xhr.open(method, uri, async);
   

   • method：请求方式，通常是GET或POST。
   • uri：请求地址。
   • async：是否异步。如果是true表示异步（推荐），false表示同步。

3. 发送请求

   xhr.send(params);
   

   • params：请求时需要传递的参数。
     • 如果是GET请求，则设置为null（GET请求的参数应包含在URL中）。
     • 如果是POST请求，没有参数时设置为null，有参数则设置为参数内容（例如："name=value&name2=value2"）。

4. 接收响应

• xhr.status：响应状态
  • 200：表示请求成功。
  • 404：表示资源未找到。
  • 500：表示服务器内部错误或其他服务器端错误。

xhr.responseText：得到响应结果

同步请求：

<script type="text/javascript">/*** 同步请求*/function test01() {// 得到XMLHttpRequest对象var xhr = new XMLHttpRequest();// 打开请求xhr.open("GET", "js/data.json", false); // 第三个参数设为false表示同步请求// 发送请求xhr.send(null);// 判断响应状态if (xhr.status == 200) {console.log(xhr.responseText);} else {console.log("状态码：" + xhr.status + "，原因：" + xhr.responseText);}}
</script>

异步请求：

/*** 异步请求*/
function test02() {// 得到XMLHttpRequest对象var xhr = new XMLHttpRequest();// 打开请求xhr.open("GET", "js/data.json", true); // 第三个参数设为true表示异步请求// 发送请求xhr.send(null);// 判断响应状态if(xhr.ststus == 200){// 获取响应结果console.log(xhr.responseText);} else {console.log("状态码：" + xhr.status + "，原因：" + xhr.responseText);}}
}

由于是异步请求，所以需要知道后台已经将请求处理完毕，才能获取响应结果
通过监听readyState的变化来得知后面的处理状态 4= 完全处理
xhr.onreadystatechange = function(){ }

Ajax使用

jquery调用ajax方法：
格式：$.ajax({});
参数：

• type：请求方GET/POST
  *url:请求地址url
async：是否异步，默认是true表示异步，false=同步
  data：发送到服务器的数据
  dataType：预期服务器返回的数据类型。"JSON"表示将得到的JSON字符串自动封装成JSON对象
  contentType：设置请求头
  *success：请求成功时调用的函数（回调函数）
  error：请求失败时调用此函数

$.ajax({type: "GET", // 请求类型，例如："POST"、"GET"url: "js/data.json", // 请求路径data: {"paramName1": "value1", // 参数名：值"paramName2": "value2"  // 另一个参数名：值},async: true, // 默认是true，可以省略dataType: "json",// dataType: "json", // 文本，字符串success: function(response) { // 形参名可以任意 函数的形参：响应结果// 在这里处理成功获取的数据console.log(response);}
});

发送请求方式为GET的ajax请求

1. 发送请求，无参数，无返回值：

$.get("请求路径");

2. 发送请求，有参数，无返回值：

$.get("请求路径", "请求参数");

3. 发送请求，无参数，有返回值：

$.get("请求路径", function(返回结果) {// 处理返回结果
});

4. 发送请求，有返回值，有参数

$.get("请求路径", "请求参数",function(返回结果) {// 处理返回结果
});

5. 使用jQuery的$.get()方法发起一个GET类型的Ajax请求，以加载远程数据

$.get("js/data.json", {"uname": "zs", "upwd": "123"}, function(data) {console.log(data);
});

确保使用标准的英文双引号"而不是中文引号或任何其他特殊字符。这段代码将向js/data.json发送一个GET请求，传递uname和upwd作为查询参数，并在请求成功后通过console.log(data)打印服务器返回的数据。

发送请求方式为POST的ajax请求

1. 发送请求，无参数，无返回值：

$.post("请求路径");

2. 发送请求，有参数，无返回值：

$.post("请求路径", "请求参数");

3. 发送请求，无参数，有返回值：

$.post("请求路径", function(返回结果) {// 处理返回结果
});

4. 发送请求，有返回值，有参数

$.post("请求路径", "请求参数",function(返回结果) {// 处理返回结果
});

5. 使用$.getJSON()方法来得到返回结果是JSON格式数据

$.getJSON("js/data.json", {"uname": "zs", "upwd": "123"}, function(data) {console.log(data);
});

这段代码将会：

• 向js/data.json发送一个GET请求。
• 传递uname和upwd作为查询参数。
• 如果请求成功并且服务器返回的是JSON格式的数据，则自动解析这个JSON数据。
• 使用console.log(data)打印解析后的对象或数组（即返回的JSON数据）。

请确保：

• URL "js/data.json" 和 参数 {"uname": "zs", "upwd": "123"} 根据实际情况进行替换。
• 使用英文状态下的双引号和括号，以避免语法错误。

这样就可以正确地利用$.getJSON()来获取JSON格式的数据了。

案例

以下是补充完整的 AJAX 案例代码，包含必要的 HTML 结构、错误处理：

<!DOCTYPE html>
<html>
<head><title>AJAX 数据表格示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>table {width: 80%;margin-top: 20px;border-collapse: collapse;}th, td {padding: 12px;text-align: left;border-bottom: 1px solid #ddd;}th {background-color: #f2f2f2;}</style>
</head>
<body><div id="result"></div><script>// 发送 AJAX 请求，获取数据$.ajax({type: "GET",url: "js/user.json",dataType: "json", // 明确指定响应类型data: {"name": "aa","pwd": "123"},success: function(result) {console.log("请求成功:", result);testData(result);},error: function(xhr, status, error) { // 新增错误处理console.error("请求失败:", status, error);$('#result').html('<p style="color: red">数据加载失败，请稍后重试</p>');}});// 数据处理函数function testData(data) {// 增强数据校验if (!data || data.code !== 1 || !Array.isArray(data.list)) {console.error("数据格式异常:", data);$('#result').html('<p style="color: orange">数据格式异常或为空</p>');return;}try {// 创建表格对象const table = $('<table>').addClass('data-table');// 创建表头const headerRow = $('<tr>').append($('<th>').text('用户编号'),$('<th>').text('用户姓名'),$('<th>').text('注册时间') // 新增列示例);$('<thead>').append(headerRow).appendTo(table);// 创建表格体const tbody = $('<tbody>');data.list.forEach(function(user) {const row = $('<tr>').append($('<td>').text(user.id),$('<td>').text(user.name),$('<td>').text(user.registerDate || 'N/A') // 处理可能不存在的字段);tbody.append(row);});table.append(tbody);// 渲染到页面$('#result').empty().append(table);} catch (e) {console.error("表格渲染失败:", e);$('#result').html('<p style="color: red">数据处理异常</p>');}}</script>
</body>
</html>

JSON 数据示例 (js/user.json)：

{"code": 1,"message": "success","list": [{"id": 1001,"name": "张三","registerDate": "2023-01-15"},{"id": 1002,"name": "李四","registerDate": "2023-02-20"}]
}