<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="./plugins/bootstrap-5.1.3-dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="./plugins/jquery/jquery-1.9.1.js"></script>
<script src="./plugins/axios.min.js"></script>
</head>
<body>
<div class="mt-3 ms-3">
<button type="button" class="btn btn-primary" value="2" onclick="func('exportArea',this,event)">onclick事件的this和event</button>
<button type="button" class="btn btn-primary" value="2" onclick="func('exportArea')">onclick事件的this和event</button>
<button type="button" class="btn btn-primary" value="2" id="btn3">onclick事件的this和event</button>
<button type="button" class="btn btn-primary" value="2" id="btn1">jquery click事件的this和event</button>
<button type="button" class="btn btn-primary" value="2" id="btn2">jquery click事件的this和event</button>
</div>
<div class="mt-3 ms-3">
<form id="form1">
<input type="text" name="aa" />
<input type="file" name="file" />
<button type="button" onclick="submitForm1('form1')" class="btn btn-primary">jquery ajax</button>
<button type="button" onclick="submitForm2('form1')" class="btn btn-primary">fetch</button>
<button type="button" onclick="submitForm3('form1')" class="btn btn-primary">axios</button>
<br />
<button type="button" onclick="getFormData('form1')" class="btn btn-primary">get form data</button>
<button type="button" onclick="requestWithJson()" class="btn btn-primary">request with json</button>
<button type="button" onclick="axiosRequest()" class="btn btn-primary">axios request</button>
</form>
</div>
</body>
<script>
function func(param, dom, e) {
console.log(param);
console.log(dom);
console.log(e);
}
document.querySelector("#btn3").addEventListener("click", function (e) {
console.log(this);
console.log(e);
});
$("#btn1").on("click", function (e) {
console.log(this);
console.log(e);
});
$("#btn2").on("click", (e) => {
console.log(this);
console.log(e);
});
</script>
<script>
function getFormData(domId) {
// const formData = new FormData();
const formData = new FormData(document.getElementById(domId));
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
console.log(formData.get("k1"));
console.log(formData.getAll("k1"));
formData.append("k1", "v1");
formData.set("k1", "1");
console.log(formData.getAll("k1"));
console.log(formData.has("k1"));
formData.delete("k1");
console.log(formData.has("k1"));
//遍历
for (let [index, item] of formData.entries()) {
console.log(index, item);
}
console.log($("#" + domId).serialize());
}
</script>
<script>
function submitForm1(domId) {
const serializeData = $("#" + domId).serialize();
const url = "http://localhost/request.php";
$.ajax({
url: url,
type: "post",
cache: false,
data: serializeData,
dataType: "json",
processData: false,
contentType: "application/x-www-form-urlencoded",
success: function (res) {
console.log(res);
},
beforeSend: function () {},
error: function () {},
});
const formData = new FormData(document.getElementById(domId));
$.ajax({
url: url,
type: "post",
cache: false,
data: formData,
dataType: "json",
processData: false,
contentType: false,
success: function (res) {
console.log(res);
},
beforeSend: function () {},
error: function () {},
});
}
function submitForm2(domId) {
const url = "http://localhost/request.php";
const serializeData = $("#" + domId).serialize();
fetch(url, {
method: "post",
body: serializeData,
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
})
.then((res) => res.json())
.then((res) => {
console.log(res);
});
const formData = new FormData(document.getElementById(domId));
fetch(url, {
method: "post",
body: formData,
})
.then((res) => res.json())
.then((res) => {
console.log(res);
});
}
function submitForm3(domId) {
const serializeData = $("#" + domId).serialize();
const url = "http://localhost/request.php";
axios
.post(url, serializeData, {
headers: { "Content-Type": "application/x-www-form-urlencoded" },
})
.then((response) => {
if (response.status == "200") {
console.log(response.data);
}
});
const formData = new FormData(document.getElementById(domId));
axios
.post(url, formData, {
headers: { "Content-Type": "multipart/form-data" },
})
.then((response) => {
if (response.status == "200") {
console.log(response.data);
}
});
}
</script>
<script>
function requestWithJson() {
const dataObj = { a: 1, b: 2 };
const dataStr = JSON.stringify({ a: 1, b: 2 });
const url = "http://localhost/request.php";
$.ajax({
url: url,
type: "post",
cache: false,
data: dataStr,
dataType: "json",
processData: false,
contentType: "application/json",
success: function (res) {
console.log(res);
},
beforeSend: function () {},
error: function () {},
});
fetch(url, {
method: "post",
body: dataStr,
headers: {
"Content-Type": "application/json",
},
})
.then((res) => res.json())
.then((res) => {
console.log(res);
});
axios.post(url, dataObj).then((response) => {
if (response.status == "200") {
console.log(response.data);
}
});
}
function axiosRequest() {
const url = "http://localhost/request.php";
// 发送 POST 请求
axios({
method: "post",
url: url,
data: {
firstName: "Fred",
lastName: "Flintstone",
},
});
axios({
method: "get",
url: url,
params: {
p: 1,
},
data: {
firstName: "Fred",
lastName: "Flintstone",
},
});
axios.get(url).catch(function (error) {
if (error.response) {
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
console.log(error.request);
} else {
console.log("Error", error.message);
}
console.log(error.config);
});
}
</script>
</html>
