^-^
笔记 | JQuery&Ajax&Axios
字数总计：6.6k   |   阅读估时：28分钟

jQuery

jQuery基础

初识 jQuery

平时的开发中使用正常版本的，便于阅读源代码，产品上线的时候使用min版本的，便于加载。

企业中使用的jQuery版本大多是1.x，因为可以兼容IE 678

1
2
3
4
5
6
7
8
9
// 原生的js
window.onload = function(){
    alert("Hello World!");
}

// jquery风格
$(document).ready(function(){
    alert("Hello World !");
});

入口函数

jQuery入口函数

一共有四种写法，我们推荐第三种

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 1.第一种写法
$(document).ready(function () {
});

// 2.第二种写法
jQuery(document).ready(function () {
});

// 3.第三种写法(推荐)
$(function () {
});

// 4.第四种写法
jQuery(function () {
});

加载模式对比

原生JS和jQuery入口函数的加载模式不同，原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行，jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行, 所以我们可以通过原生JS的入口函数拿到DOM元素和元素的宽和高，而通过jQuery只能拿到元素，拿不到宽和高。

原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的，jQuery中编写多个入口函数,后面的不会覆盖前面的

解决冲突问题

如果你在使用JQuery的情况下也使用了其他框架，其他框架也使用了 $ 符号，这时候就有冲突的了，我们必须解决冲突，也就是释放 $ 的使用权。

注意点: 释放操作必须在编写其它jQuery代码之前编写，释放之后就不能再使用$,改为使用jQuery或自定义类型

1
2
3
4
5
// 释放$的使用权，自定义一个访问符号
var nj = jQuery.noConflict();
nj(function () {
	alert("hello lnj");
});

核心函数

明确概念：

  • 入口函数： $(function(){ });

  • 核心函数：$();

注意：jQuery对象是一个伪数组 , 有0到length-1的属性, 并且有length属性

1
2
3
4
5
6
7
8
9
// 1. 接收一个字符串选择器，返回一个jQuery对象, 对象中保存了找到的DOM元素
var $box1 = $(".box1");
var $box2 = $("#box2");
// 2. 接收一个字符串代码片段，返回一个jQuery对象, 对象中保存了创建的DOM元素
var $p = $("<p>我是段落</p>");
$box1.append($p);
// 3.接收一个DOM元素，如果把一个原生的js元素传递给jQuery的核心函数，它会被包装成一个jQuery对象返回给我们
var span = document.getElementsByTagName("span")[0];
var $span = $(span);

静态方法

明确概念：

  • 静态方法：直接添加给类的就是静态方法 - 通过类名调用
  • 实例方法：添加到类的原型上面的是实例方法 - 通过实例调用

each

注意: 原生的forEach方法只能遍历数组, 不能遍历伪数组

利用jQuery的each静态方法遍历数组，这种方法可以遍历伪数组

  • 第一个参数: 当前遍历到的索引
  • 第二个参数: 遍历到的元素
1
2
3
4
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
$.each(obj, function (index, value) {
	console.log(index, value);
});

map

map函数的参数

  • 第一个参数: 要遍历的数组

  • 第二个参数: 每遍历一个元素之后执行的回调函数

    回调函数的参数:

  • 第一个参数: 遍历到的元素

  • 第二个参数: 遍历到的索引

注意点:和jQuery中的each静态方法一样, map静态方法也可以遍历伪数组

1
2
3
4
var res = $.map(obj, function (value, index) {
	console.log(index, value);
	return value + index;
});

jQuery中的each静态方法和map静态方法的区别:

  • each静态方法默认的返回值就是, 遍历谁就返回谁；map静态方法默认的返回值是一个空数组
  • each静态方法不支持在回调函数中对遍历的数组进行处理；map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回

其他静态方法

$.trim();

作用: 去除字符串两端的空格

参数: 需要去除空格的字符串

返回值: 去除空格之后的字符串

$.isWindow();

作用: 判断传入的对象是否是window对象

返回值: true/false

$.isArray();

作用: 判断传入的对象是否是真数组

返回值: true/false

$.isArray();

作用: 判断传入的对象是否是一个函数

返回值: true/false

注意点:jQuery框架本质上是一个匿名函数

$.holdReady(true)

作用: 暂停ready执行,ready函数是jQuery的入口函数（详情见jQuery入口函数的第1、2种写法），等到我们想让ready函数执行的时候可以使用$.holdReady(false) 使入口函数开始执行

jQuery对象

其他选择器

1
2
3
4
5
6
7
8
9
10
11
//:empty 作用:找到既没有文本内容也没有子元素的指定元素
var $div = $("div:empty");

//:parent 作用: 找到有文本内容或有子元素的指定元素
var $div = $("div:parent");

//:contains(text) 作用: 找到包含指定文本内容的指定元素
var $div = $("div:contains('我是div')");

//:has(selector) 作用: 找到包含指定子元素的指定元素
var $div = $("div:has('span')");

属性和属性节点

明确概念：

  • 属性，是对象身上保存的变量就是属性

  • 属性节点：在编写HTML代码时,在HTML标签中添加的属性就是属性节点，在浏览器中找到span这个DOM元素之后, 展开看到的都是属性，在attributes属性中保存的所有内容都是属性节点

  • 区别：任何对象都有属性, 但是只有DOM对象才有属性节点

  1. attr(name|pro|key,val|fn) 作用: 获取或者设置属性节点的值
  • 传递一个参数, 代表获取属性节点的值
  • 传递两个参数, 代表设置属性节点的值

注意:

  • 如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
  • 如果是设置:找到多少个元素就会设置多少个元素
  • 如果是设置:如果设置的属性节点不存在, 那么系统会自动新增
  1. removeAttr(name) 作用: 删除找到元素的所有属性节点
1
2
$("span").attr("class", "box");
$("span").removeAttr("class name"); //多个元素中间用空格隔开
  1. prop方法，特点和attr方法一致
  2. removeProp方法，特点和removeAttr方法一致
1
$("span").eq(1) // 将span中所有元素找出，选出下标为1的元素，将其包装为jQuery对象并返回

如何在attr和prop方法之间选择？

  • 注意: prop方法不仅能够操作属性, 他还能操作属性节点，官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

类、文本、CSS、尺寸等相关操作

  1. addClass(class|fn)

作用: 添加一个类

如果要添加多个, 多个类名之间用空格隔开即可

  1. removeClass([class|fn])

作用: 删除一个类

如果想删除多个, 多个类名之间用空格隔开即可

  1. toggleClass(class|fn[,sw])

作用: 切换类，有就删除, 没有就添加

1
2
3
4
5
6
7
8
9
10
var btns = document.getElementsByTagName("button");
btns[0].onclick = function () {
	$("div").addClass("class1 class2");
}
btns[1].onclick = function () {
	$("div").removeClass("class2 class1");
}
btns[2].onclick = function () {
	$("div").toggleClass("class2 class1");
}
  1. html([val|fn]) 和原生JS中的innerHTML一模一样
  2. text([val|fn]) 和原生JS中的innerText一模一样
  3. val([val|fn|arr])
1
2
3
4
5
6
7
8
9
10
var btns = $("button");
btns[0].onclick = function () {
    $("div").html("<p>我是段落<span>我是span</span></p>");
}
btns[2].onclick = function () {
    $("div").text("<p>我是段落<span>我是span</span></p>");
}
btns[4].onclick = function () {
    $("input").val("请输入内容");
}

使用JQuery设置CSS相关代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 编写jQuery相关代码
// 1.逐个设置
$("div").css("width", "100px");
$("div").css("height", "100px");
$("div").css("background", "red");

// 2.链式设置
// 注意点: 链式操作如果大于3步, 建议分开
$("div").css("width", "100px").css("height", "100px").css("background", "blue");

// 3.批量设置[推荐]
$("div").css({
	width: "100px",
	height: "100px",
	background: "red",
});

// 4.获取CSS样式值
console.log($("div").css("background"));

获取元素的宽度

console.log($(“.father”).width());

offset([coordinates])

作用: 获取元素距离窗口的偏移位

console.log($(“.son”).offset().left);

position()

作用: 获取元素距离定位元素的偏移位,

console.log($(“.son”).position().left);

获取偏移位：

1
2
3
4
5
6
7
8
9
10
11
// 监听获取
btns[0].onclick = function () {
    // 获取网页滚动的偏移位
    // 注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
    console.log($("body").scrollTop()+$("html").scrollTop());
}
btns[1].onclick = function () {
    // 设置网页滚动偏移位
    // 注意点: 为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法
    $("html,body").scrollTop(300);
}

事件操作

事件的绑定

jQuery中有两种绑定事件方式

1.eventName(fn); （初学者推荐）

编码效率略高（有代码提示）/ 部分事件jQuery没有实现,所以不能添加

2.on(eventName, fn); （大佬推荐）

编码效率略低（没有代码提示）/ 所有js事件都可以添加

注意点:可以添加多个相同或者不同类型的事件,不会覆盖

1
2
3
$("button").on("click", function () {
    alert("hello click1");
});

事件的移出

off方法如果不传递参数, 会移除所有的事件 $("button").off();

off方法如果传递一个参数, 会移除所有指定类型的事件 $("button").off("click");

off方法如果传递两个参数, 会移除所有指定类型的指定事件 $("button").off("click", test1);

事件冒泡和默认行为

如何阻止事件冒泡 在回调函数最后返回 false 或接受一个event参数，在最后设置 event.stopPropagation();

如何阻止默认行为 在回调函数的最后返回 false 或者接受一个event参数，在最后设置 event.preventDefault();

1
2
3
4
5
6
7
8
9
10
$(".son").click(function (event) {
	alert("son");
	// return false;
	event.stopPropagation();
});  
$("a").click(function (event) {
	alert("弹出注册框");
	// return false;
	event.preventDefault();
});

自动触发事件和行为

trigger: 如果利用trigger自动触发事件,会触发事件冒泡

triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡

trigger: 如果利用trigger自动触发事件,会触发默认行为

triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为

自定义事件

想要自定义事件, 必须满足两个条件

  1. 事件必须是通过on绑定的

  2. 事件必须通过trigger来触发

1
2
3
4
$(".son").on("myClick", function () {
	alert("son");
});
$(".son").triggerHandler("myClick");

事件的命名空间

情形：有多个人对同一个元素设置了多个事件

想要自定义事件, 必须满足两个条件

  1. 事件必须是通过on绑定的

  2. 事件必须通过trigger来触发

1
2
3
4
5
6
7
8
$(".son").on("click.zs", function () {
	alert("click1"); // 张三设置了一个click
});
$(".son").on("click.ls", function () {
	alert("click2"); // 李四设置了一个click
});

$(".son").trigger("click.ls");

注意：

  • 利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发
  • 利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发

也就是说：

1
2
3
4
5
6
7
8
9
10
11
12
$(".father").on("click.ls", function () { // 1 
	alert("father click1");
});
$(".father").on("click", function () { // 2
	alert("father click2");
});
$(".son").on("click.ls", function () { // 3
	alert("son click1");
});

$(".son").trigger("click.ls"); // 子事件带有命名空间，会触发 3 1
$(".son").trigger("click"); // 子元素不带有命名空间， 会触发 3 1 2

移入移出与事件委托

jQuery动画

显示和隐藏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 编写jQuery相关代码
// div 是一个方块，作为我们添加动画的对象
$("button").eq(0).click(function () {
	// $("div").css("display", "block");
	// 注意: 这里的时间是毫秒
	$("div").show(1000, function () {
		// 作用: 动画执行完毕之后调用
		alert("显示动画执行完毕");
	});
});

$("button").eq(1).click(function () {
	// $("div").css("display", "none");
	$("div").hide(1000, function () {
		alert("隐藏动画执行完毕");
	});
});

$("button").eq(2).click(function () {
	$("div").toggle(1000, function () {
		alert("切换动画执行完毕");
	});
});

展开收起

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 编写jQuery相关代码
// div 是一个方块，作为我们添加动画的对象
$("button").eq(0).click(function () {
	$("div").slideDown(1000, function () {
		alert("展开完毕");
	});
});
$("button").eq(1).click(function () {
	$("div").slideUp(1000, function () {
		alert("收起完毕");
	});
});
$("button").eq(2).click(function () {
	$("div").slideToggle(1000, function () {
		alert("收起完毕");
	});
});

淡入淡出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 编写jQuery相关代码
// div 是一个方块，作为我们添加动画的对象
$("button").eq(0).click(function () {
	$("div").fadeIn(1000, function () {
		alert("淡入完毕");
	});
});
$("button").eq(1).click(function () {
	$("div").fadeOut(1000, function () {
		alert("淡出完毕");
	});
});
$("button").eq(2).click(function () {
	$("div").fadeToggle(1000, function () {
		alert("切换完毕");
	});
});
$("button").eq(3).click(function () {
	$("div").fadeTo(1000, 0.2, function () {
		alert("淡入完毕");
	})
});

JQuery + Ajax

三个主要方法

$.ajax() 【最常用的】

$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。

语法： $.ajax( { name:value, name:value, ... } )

说明：参数是 json 的数据，包含请求方式，数据，回调方法等

常用参数：

  • async ： 布尔值，表示请求是否异步处理。默认是 true
  • contentType ：发送数据到服务器时所使用的内容类型。默认是：”application/x-www-form-urlencoded”。
  • data：规定要发送到服务器的数据，可以是：string， 数组，多数是 json
  • dataType：期望从服务器响应的数据类型。jQuery 从 xml, json, text,, html 这些中测试最可能的类型
    • “xml” - 一个 XML 文档
    • “html” - HTML 作为纯文本
    • “text” - 纯文本字符串
    • “json” - 以 JSON 运行响应，并以对象返回
  • error(xhr,status,error)：如果请求失败要运行的函数, 其中 xhr, status, error 是自定义的形参名
  • success(result,status,xhr)：当请求成功时运行的函数，其中 result, status, xhr 是自定义的形参名
  • type：规定请求的类型（GET 或 POST 等），默认是 GET， get，post 不用区分大小写
  • url：规定发送请求的 URL。

举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
   $(function () {
       $("#search").click(function () { // 为按钮加上点击事件

           var userId = $("#id").val(); // 获取dom的value
           // 发起ajax请求
           $.ajax({
               url:"result", // 键值对，字符串值用引号引起来
// data的值大多是json类型
               data: { 
	// 为什么前一个id要用引号引起来？
	// 答：这个id是一个参数名，我们要在后台根据这个参数名称用 request.getPatameter("id"); 取出里面的数据
                   "id": userId
               },
               dataType:"json",
               success: function (resp) {
                   // resp是返回的json对象，就是后端的 PrinterWriter 输出的值
	// 更新页面
                   $("#name").val(resp.name);
                   $("#jiancheng").val(resp.jiancheng);
                   $("#shenghui").val(resp.shenghui);
               }
           });
       })
   })

$.get()

$.get() 方法使用 HTTP GET 请求从服务器加载数据。

语法：$.get(url,data,function(data,status,xhr),dataType)

  • url 必需。规定您需要请求的 URL。
  • data 可选。规定连同请求发送到服务器的数据。
  • function(data,status,xhr)可选。当请求成功时运行的函数。data,status,xhr 是自定义形参名。
  • 参数说明：
    • data - 包含来自请求的结果数据
    • status - 包含请求的状态（”success”、”notmodified”、”error”、”timeout”、”parsererror”）
    • xhr - 包含 XMLHttpRequest 对象
  • dataType 可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的
    • 类型：
    • “xml” - 一个 XML 文档
    • “html” - HTML 作为纯文本
    • “text” - 纯文本字符串
    • “json” - 以 JSON 运行响应，并以对象返回

实际开发中使用较少，例子略。

$.post()

$.post() 方法使用 HTTP POST 请求从服务器加载数据。

语法：$.post(URL,data,function(data,status,xhr),dataType)

参数同$get()

普通查询

代码见 D:\GITHUB\Learning\JavaWeb\Ajax\jQuery&Ajax-普通查询

具体细节不再详细说了。

级联查询

代码见 D:\GITHUB\Learning\JavaWeb\Ajax\jQuery&Ajax-级联查询

具体细节就不再详细写了。

Ajax

实际开发中使用JQuery + Ajax较多，这部分内容作为了解即可。

重点内容是 JQuery的 【## JQuery + Ajax 中的普通查询和级联查询】

ajax:Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

  • Asynchronous: 异步的意思

  • JavaScript：javascript脚本，在浏览器中执行

  • and : 和

  • xml : 是一种数据格式

ajax是一种做局部刷新的新方法（2003左右），不是一种语言。 ajax包含的技术主要有javascript, dom,css, xml等等。 核心是javascript 和 xml （json）。

javascript：负责创建异步对象， 发送请求， 更新页面的dom对象。 ajax请求需要服务器端的数据。

xml，现在是json

全局刷新和局部刷新

全局刷新： 整个浏览器被新的数据覆盖。 在网络中传输大量的数据。 浏览器需要加载，渲染页面。

局部刷新： 在浏览器器的内部，发起请求，获取数据，改变页面中的部分内容。 其余的页面无需加载和渲染。 网络中数据传输量少， 给用户的感受好。

ajax是用来做局部刷新的。局部刷新使用的核心对象是 异步对象（XMLHttpRequest）， 这个异步对象是存在浏览器内存中的 ，使用javascript语法创建和使用XMLHttpRequest对象。

异步请求对象

步骤：

  1. 创建异步对象 var xmlHttp = new XMLHttpRequest();

  2. 给异步对象绑定事件。onreadystatechange ：当异步对象发起请求，获取了数据都会触发这个事件。这个事件需要指定一个函数， 在函数中处理状态的变化。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 例如：
        xmlHttp.onreadystatechange= function(){
           处理请求的状态变化。
    		 if(xmlHttp.readyState == 4 && xmlHttp.status== 200 ){
               //可以处理服务器端的数据，更新当前页面
    			  var data = xmlHttp.responseText;
    			  document.getElementById("name").value= data;
    		 }
        }

  3. 初始异步请求对象 : 异步的方法open(). xmlHttp.open(请求方式get|post, "服务器端的访问地址", 同步|异步请求（默认是true，异步请求）)例如：xmlHttp.open(“get”, “loginServlet?name=zs&pwd=123”,true);

  4. 使用异步对象发送请求 xmlHttp.send()

异步对象的属性 readyState 表示异步对象请求的状态变化

  • 0：创建异步对象时， new XMLHttpRequest();
  • 1: 初始异步请求对象， xmlHttp.open()
  • 2：发送请求， xmlHttp.send()
  • 3: 从服务器端获取了数据，此时3， 注意3是异步对象内部使用， 获取了原始的数据。
  • 4：异步对象把接收的数据处理完成后。 此时开发人员在4的时候处理数据。在4的时候，开发人员做什么 ？ 更新当前页面。

异步对象的status属性，表示网络请求的状况的， 200， 404， 500， 需要是当status==200时，表示网络请求是成功的。

获取服务器端返回的数据， 使用异步对象的属性 responseText . 例子：xmlHttp.responseText

回调：当请求的状态变化时，异步对象会自动调用onreadystatechange事件对应的函数。

访问地址： 使用get方式传递参数http://localhost:8080/course_myajax/bmiPrint?name=李四&w=82&h=1.8

前端实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<head>
  <title>UpAndDown</title>
  <script type="text/javascript">

    function doAjax() {
      // 使用内存中的一部对象，代替浏览器发起请求，异步对象使用js创建和管理。
      // 1. 创建对象异步对象
      var xmlHttp = new XMLHttpRequest();
      // 2. 绑定事件
      xmlHttp.onreadystatechange = function () {
        //处理服务器返回的数据，更新当前的页面
        // 响应成功, 更新部分页面
        if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
          document.getElementById("result").innerText = xmlHttp.responseText;
        }
      }
      // 3. 初始请求数据
      // 获取dom对象的value属性值
      var height = document.getElementById("height").value;
      var weight = document.getElementById("weight").value;
      var param = "weight="+weight+"&height="+height;

      alert(param);

      xmlHttp.open("get", "result?" + param, true);
      // 4. 发起请求
      xmlHttp.send();
    }

  </script>
</head>
  <body>
      身高<input type="text" id="height" />
      体重<input type="text" id="weight"/>
      <input type="button"  value="submit" onclick="doAjax()"/>
      <br>
      <br>
      <div id="result">结果</div>
  </body>

后端实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public class ResultServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        double height = Double.parseDouble(request.getParameter("height"));
        double weight = Double.parseDouble(request.getParameter("weight"));
        double result = weight / (height * height);
        //---------------------
        response.setContentType("text/html; charset=utf-8");
        PrintWriter pw = response.getWriter();
        pw.println("您的BMI指数为 ： " +result);
        pw.flush();
        pw.close();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

全局刷新源代码：Learning\JavaWeb\Ajax\BMI-整体刷新

局部刷新源代码：Learning\JavaWeb\Ajax\BMI-局部刷新

json的使用

ajax发起请求——-servlet（返回的一个json格式的字符串 { name:”河北”, jiancheng:”冀”,”shenghui”:”石家庄”}）

json分类：

  1. json对象 ，JSONObject ,这种对象的格式 名称:值， 也可以看做是 key:value 格式。
  2. json数组， JSONArray, 基本格式 [{ name:”河北”, jiancheng:”冀”,”shenghui”:”石家庄”} , { name:”山西”, jiancheng:”晋”,”shenghui”:”太原”} ]

为什么要使用json

  1. json格式好理解
  2. json格式数据在多种语言中，比较容易处理。 使用java， javascript读写json格式的数据比较容易。
  3. json格式数据他占用的空间下，在网络中传输快， 用户的体验好。

处理json的工具库： gson（google）； fastjson（阿里），jackson， json-lib

在js中的，可以把json格式的字符串，转为json对象， json中的key，就是json对象的属性名。

添加处理json的jar包：

jackson-annotations-2.9.0.jar
jackson-core-2.9.0.jar
jackson-databind-2.9.0.jar

代码：

详细代码见:Learning\JavaWeb\Ajax\使用json+ajax

前端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type="text/javascript">

  function doAjax() {
    // 使用内存中的一部对象，代替浏览器发起请求，异步对象使用js创建和管理。
    // 1. 创建对象异步对象
    var xmlHttp = new XMLHttpRequest();
    // 2. 绑定事件
    xmlHttp.onreadystatechange = function () {
      //处理服务器返回的数据，更新当前的页面
      // 响应成功
      if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
          // eval 是执行括号中的代码，把json转换为json对象
          var jsonobj = eval("(" + xmlHttp.responseText + ")");
          // 更新json对象
          document.getElementById("name").value = jsonobj.name;
          document.getElementById("jiancheng").value = jsonobj.jiancheng;
      }
    }
    // 3. 初始请求数据
    // 获取dom对象的value属性值
    var id = document.getElementById("id").value;
    xmlHttp.open("get", "result?id=" + id, true);
    // 4. 发起请求
    xmlHttp.send();
  }

</script>

后端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    request.setCharacterEncoding("utf-8");
    String sql = "select id, name, jiancheng, shenghui from province where id = ?";
    Object[] params = {request.getParameter("id")};
    ResultSet rs = DBUtil.executeQuery(sql, params);

    Province province;
    // 设置初始值。保证无论如何都会返回一个json格式的数据
    String json = "{}";

    try {
        if(rs.next()){
            province = new Province(rs.getString("id"),
                    rs.getString("name"),
                    rs.getString("jiancheng"),
                    rs.getString("shenghui"));
            ObjectMapper objectMapper = new ObjectMapper();
            json = objectMapper.writeValueAsString(province);
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }
    response.setContentType("application/json;charset=utf-8");
    PrintWriter pw = response.getWriter();
    pw.println(json);
    pw.flush();
    pw.close();
}

其他

ajax实现页面跳转

1
2
3
4
5
6
7
8
9
10
$.ajax({
    type:"POST",
    url: //你的请求程序页面随便啦
    async:false,//同步：意思是当有返回值以后才会进行后面的js程序。
    data://请求需要发送的处理数据
    success:function(msg){
        if (msg) {//根据返回值进行跳转
            window.location.href = '你的跳转的目标地址';
        }
    });

ajax只接受最后返回的值，不会响应跳转请求更改浏览器地址栏地址转向的，你需要用js判断ajax的返回值是否要跳转，然后设置location.href实现跳转。

ajax异步请求struts的action只会返回所请求页面的html源代码。这样请求是不会跳转的。

补充一下:在springMVC框架中,当controller层方法返回String类型的时候默认是进行页面跳转,这时候后台使用return时ajax接收到的并不是后台返回的某个字符串或状态码,而是整个html对象,这时可以在后台的方法上添加注解 @ResponseBody,就可以直接使用return返回想要返回的字符串而不进行页面跳转,而且ajax接收到的也是我们想要返回的字符串而不是整个html对象,然后再进行判断后用window.location.href进行页面跳转

Axios

Axios 官网 https://github.com/axios/axios

get请求

基本语法：

axios.get(地址？k1=v1&k2=vv2&k3=v3).then(function(reponse){},function(error){})

示例：

1
2
3
4
5
6
7
function(){
    axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function(response){
        console.log(response);
    }, function(error){
        console.log(error)
    })
}

post请求

axios.post(地址,json对象).then(function(response){},function(error){})

示例：

1
2
3
4
5
6
7
8
9
function(){
    axios.post("https://automnfish.cn/api/user/reg", {
        username:"jack"
    }).then(function(response){
        console.log(response)
    }, function(error){
        console.log(error)
    })
}

Vue+Axios

点击按钮之后随机获取一条笑话

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<body>
	<div id="app">
		<button type="button" @click="getJoke">点击按钮随机获取一条笑话</button> <br>
		{{msg}}
	</div>
	<script type="text/javascript">
		Vue = new Vue({
			el:"#app",
			data: {
				msg: ""
			},
			methods: {
				getJoke: function(){
                    	// 在匿名函数中this的指向改变了
                    	// 所以在这里先用that把this保存起来
					var that = this
					axios.get("https://autumnfish.cn/api/joke").then(function(response){
                        		// 在这里直接用that进行赋值
						that.msg = response.data
					}, function(error){
						console.log(error)
					})
				}
			}
		})
		
	</script>
</body>
2022-09-21

上一篇：笔记 | Express.js 下一篇：译 | BSD通用命令手册
Change And Challenge