<!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>
标签:function,插件,console,log,url,res,FormData,js,formData From: https://www.cnblogs.com/caroline2016/p/16905518.html