ajax请求// 不要忘记把自己node.js 服务器打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 引入jquery第三方js库 -->
<script src="./jquery.min.js"></script>
</head>
<body>
<form>
<label for="name">账号：</label>
<input type="text" id="name" name="username" />
<br />
<label for="pwd">密码：</label>
<input type="text" id="pwd" name="password" />
<br />
<input type="submit" value="注册" />
</form>
<h1></h1>
<script>
// ajax：是一种异步请求的技术，js中实现ajax请求的方式有很多：原生ajax、jQuery、axios、fetch等。其中 jQuery、axios、fetch 都是基于 原生ajax 封装之后得到的插件。
// 1. 下载 jQuery 插件代码；
// 2. 在当前文件中引入这个js插件；
// 3. 可以使用 jQuery 语法，发送请求；
let form = document.querySelector("form");
form.onsubmit = function (e) {
e.preventDefault();
//#region jQuery发送GET请求
// 三个参数：
// a. 请求地址
// b. 请求携带的查询字符串数据
// c. 请求成功之后，jQuery会来调用这个匿名函数
// $.get(
// "http://localhost:8080/register",
// {
// username: document.getElementById("name").value,
// password: document.getElementById("pwd").value,
// },
// function (data) {
// // data 直接被 jQuery 转化为对象了，不再是JSON字符串了。
// if (data.status == 0) {
// document.querySelector("h1").innerText =
// "注册失败，用户名已被占用";
// } else {
// document.querySelector("h1").innerText = "恭喜你，注册成功";
// }
// }
// );
//#endregion
//#region jQuery发送POST请求
// post() 方法的参数和 $.get()一样
// $.post(
// "http://localhost:8080/register",
// {
// username: document.getElementById("name").value,
// password: document.getElementById("pwd").value,
// },
// function (data) {
// if (data.status == 0) {
// document.querySelector("h1").innerText =
// "注册失败，用户名已被占用";
// } else {
// document.querySelector("h1").innerText = "恭喜你，注册成功";
// }
// }
// );
//#endregion
//#region jQuery自定义ajax请求
// 功能丰富：可以自定义请求头，请求失败时的处理。
// $.ajax({
// url: "http://localhost:8080/register",
// type: "post", // 请求类型 GET/POST/PUT/DELETE
// data: {
// username: document.getElementById("name").value,
// password: document.getElementById("pwd").value,
// }, // 请求携带的数据
// headers: {
// Username: "test",
// }, // 自定义请求头
// success: function (data) {
// console.log("---", data);
// }, // 请求成功后的回调函数
// error: function (err) { }, // 请求失败时的回调函数
// complete: function () { }, // 不管请求成功了还是失败了，都会调用这个函数，表示请求完成。
// });
// //#endregion
};
</script>
</body>
</html>
浙公网安备 33010602011771号