網站首頁 編程語言 正文
1、AJAX亂碼問題
（1）發送ajax get 或者 ajax post請求時下面兩種情況？
①發送數據到服務器，服務器獲取的數據是否亂碼？
②服務器響應給前端的中文，會不會亂碼？
（2）以Tomcat9為例：
①前端代碼：填數據，發送到服務器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試AJAX亂碼問題</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
// -----------------------------------------------ajax get
document.getElementById("btn1").onclick = function(){
// 創建對象
var xhr = new XMLHttpRequest();
// 注冊回調函數
xhr.onreadystatechange = function (){
if (this.readyState == 4) {
if (this.status == 200) {
document.getElementById("mydiv").innerHTML = this.responseText
}
}
}
// 打開通道
var username = document.getElementById("username").value
xhr.open("GET", "/ajax/ajaxrequest7?username="+username+"&t=" + new Date().getTime(), true)
// 發送請求
xhr.send()
}
// -----------------------------------------------ajax post
document.getElementById("btn2").onclick = function(){
// 創建對象
var xhr = new XMLHttpRequest();
// 注冊回調函數
xhr.onreadystatechange = function (){
if (this.readyState == 4) {
if (this.status == 200) {
document.getElementById("mydiv").innerHTML = this.responseText
}
}
}
// 打開通道
xhr.open("POST", "/ajax/ajaxrequest7", true)
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
var username = document.getElementById("username").value
// 發送請求
xhr.send("username=" + username)
}
}
</script>
<input type="text" id="username"><br>
<button id="btn1">發送ajax get請求，測試亂碼問題</button><br>
<button id="btn2">發送ajax post請求，測試亂碼問題</button><br>
<div id="mydiv"></div>
</body>
</html>②后端代碼：先獲取數據，然后在把數據響應給服務器
package com.bjpowernode.javaweb.ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* @program: 代碼
* @ClassName: AjaxRequest7Servlet
* @version: 1.0
* @description: 測試ajax亂碼問題
**/
@WebServlet("/ajaxrequest7")
public class AjaxRequest7Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 接收的中文會不會亂碼----不會
String username = request.getParameter("username");
System.out.println(username);
// 響應中文會有亂碼嗎？----會
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(username);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 接收的中文會不會亂碼----會
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
System.out.println(username);
// 響應中文會有亂碼嗎？---會
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(username);
}
}（3）測試結果：
對于tomcat10來說，關于字符集，我們程序員不需要干涉，不會出現亂碼。
對于tomcat9和之前的版本來說：
①對于GET請求：接收前端的數據輸出到控制臺不會亂碼；把接收到的數據重新發給瀏覽器，輸出打印到瀏覽器會亂碼！
②對于POST請求：接收前端的數據輸出到控制臺和把接收到的數據重新發給瀏覽器進行輸出兩者都會亂碼！
??發送給服務器的數據，服務器接收之后在控制臺打印亂碼解決
request.setCharacterEncoding("UTF-8");??把接收到的數據響應給瀏覽器亂碼解決
response.setContentType("text/html;charset=UTF-8");2、AJAX的異步與同步
（1）什么是異步？什么是同步？
①ajax請求1和ajax請求2，同時并發，誰也不用等誰，這就是異步。（a不等b，b也不等a）
②如果ajax請求1在發送的時候需要等待ajax請求2結束之后才能發送，那么這就是同步。（a等待b，或者b等待a，只要發生等待，就是同步）
（2）異步和同步在代碼上如何實現？
同步：如果第三個參數是false，這個就表示“ajax請求1”不支持異步，也就是說ajax請求1發送之后，會影響其他ajax請求的發送，只有當我這個請求結束之后，你們其他的ajax請求才能發送。
xhr1.open("請求方式", "URL", false)異步：如果第三個參數是true，這個就表示“ajax請求2”支持異步請求，也就是說ajax請求2發送之后，不影響其他ajax請求的發送。
xhr.open("請求方式", "URL", true) （3）演示異步和同步
①前端代碼：編寫兩個ajax請求，發送的都是GET請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示ajax同步和異步</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
// --ajax請求1
document.getElementById("btn1").onclick = function (){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if (this.readyState == 4) {
if (this.status == 200) {
document.getElementById("div1").innerHTML = this.responseText
}else{
alert(this.status)
}
}
}
xhr.open("GET", "/ajax/ajaxrequest8?t=" + new Date().getTime(), true)
xhr.send()
}
// --ajax請求2
document.getElementById("btn2").onclick = function (){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if (this.readyState == 4) {
if (this.status == 200) {
document.getElementById("div2").innerHTML = this.responseText
}else{
alert(this.status)
}
}
}
xhr.open("GET", "/ajax/ajaxrequest9?t=" + new Date().getTime(), true)
xhr.send()
}
}
</script>
<button id="btn1">ajax請求1</button>
<div id="div1"></div>
<button id="btn2">ajax請求2</button>
<div id="div2"></div>
</body>
</html>②后端代碼：根據兩個ajax發送不同的請求編寫
ajax1的請求
package com.bjpowernode.javaweb.ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @program: 代碼
* @ClassName: AjaxRequest8Servlet
* @version: 1.0
* @description: 測試ajax同步和異步
**/
@WebServlet("/ajaxrequest8")
public class AjaxRequest8Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
// 睡眠10秒
Thread.sleep(10 * 1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
response.setContentType("text/html;charset=UTF-8");
response.getWriter().print("ajax請求1");
}
}ajax2的請求
package com.bjpowernode.javaweb.ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @program: 代碼
* @ClassName: AjaxRequest8Servlet
* @version: 1.0
* @description: 測試ajax同步和異步
**/
@WebServlet("/ajaxrequest9")
public class AjaxRequest9Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
response.getWriter().print("ajax請求2");
}
}③運行效果
??為了方便測試展示效果，給第一個ajax1請求睡眠了10秒
??ajax1的請求是true，說明支持異步，在睡眠10秒之內，也能發送ajax2請求，互不影響！
??ajax1的請求是false，說明是同步，在睡眠10秒之內整個屏幕相當于是鎖死的，不能發送ajax2請求！只能等待睡眠結束，ajax1請求結束，才能發送ajax2請求！
（4）什么情況下用同步？ （大部分情況下我們都是使用ajax異步方式，同步很少用）
例如：用戶注冊
①用戶名需要發送ajax請求進行校驗。
②郵箱地址也需要發送ajax請求校驗。
③其他的也可能需要發送ajax請求...............
④并且最終注冊按鈕的時候，也是發送ajax請求進行注冊。
⑤那么顯然，注冊的Ajax請求和校驗的ajax請求不能異步，必須等待所有的校驗ajax請求結束之后，注冊的ajax請求才能發！
3、AJAX代碼封裝
JQuery庫的初次封裝：根據id獲取元素！
（1）AJAX請求相關的代碼都是類似的，有很多重復的代碼，那么我們不妨把這些重復的代碼封裝一個工具類。要發送ajax請求的話，就直接調用這個工具類中的相關函數即可。
（2）接下來，手動封裝一個工具類，這個工具類我們可以把它看做是一個JS的庫。我們把這個JS庫起一個名字，叫做jQuery。（封裝的jQuery只是一個前端的庫，和后端的java沒有關系，只是為了方便web前端代碼的編寫，提高WEB前端的開發效率）
①源碼原型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
window.onload = function () {
document.getElementById("mybtn").onclick = function () {
document.getElementById("div").innerHTML = "<font color='red'>歡迎登陸</font>"
}
}
</script>
<body>
<button id="mybtn">顯示信息</button>
<div id="div">
</div>
</body>
</html>②進行優化：優化通過id獲取對象
（1）設計思路來自于CSS的語法：可以通過id選擇器 #id 獲取到這個元素 ，也可以通過類選擇器 .class獲取到這個元素。
（2）我們發現通過id獲取這個對象代碼太長了，不妨封裝到一個函數里面！封裝一個函數代替原來的document.getElementById，封裝到一個函數里面然后返回這個對象即可。做一個標記#，只有這個標記的才會調用document.getElementById獲得這個對象；并且參數傳進去時要調用substring函數進行截串，把#截取掉！
（3）對于函數名嫌長也可以賦值給一個符號：$ = jQuery。
<script type="text/javascript">
// 再次進行更改
function jQuery(selector) { // selector只是一個變量
// 獲取到第一個字符是不是#
if (selector.charAt(0) == "#") {
// 定義變量獲得這個對象
var domObj = document.getElementById(selector.substring(1));
// 返回的dom對象
return domObj
}
}
// 給函數名賦值
$ = jQuery
window.onload = function () {
$("#mybtn").onclick = function () {
$("#div").innerHTML = "<font color='red'>歡迎登陸</font>"
}
}
</script>③再次進行優化：頁面加載
封裝函數，替代window.onload；封裝頁面加載完畢之后，執行回調函數。
<script type="text/javascript">
function jQuery(selector) { // selector只是一個變量
// 如果傳過來的是一個字符串string
if (typeof selector == "string") {
// 獲取到第一個字符是不是#
if (selector.charAt(0) == "#") {
// 直接使全局變量
var domObj = document.getElementById(selector.substring(1));
// 返回的dom對象
return domObj
}
}
// 如果傳過來的是一個函數：頁面加載完畢，注冊回調函數
if (typeof selector == "function") {
window.onload = selector;
}
}
// 給函數名賦值
$ = jQuery
// 把函數直接傳進去
// $(function(){})的作用是：頁面加載完畢，就執行里面的回調函數
// 把整個函數當做參數直接傳進去
$(function () {
$("#mybtn").onclick = function () {
$("#div").innerHTML = "<font color='red'>歡迎登陸</font>"
}
})
</script>④繼續優化
（1）首先回顧javascript中的類的定義，對象的創建，屬性的訪問，方法的訪問！
（2）對于類的創建實際上是和函數的定義是一樣的，如果使用new就表示這是一個類；如果沒有使用new表示這是一個函數。
（3）注意：最重要的就是prototype屬性，可以用來擴展類的屬性或者方法，語法格式如下：類.prototype.屬性/方法 = function(){}
（4）注意：對于靜態方法的調用，雖然也是使用的 "類名.靜態方法" 但是前提還是要先new對象，不然還是會當做普通函數的調用！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>回顧javascript中的類的定義，對象的創建。屬性的訪問，方法的訪問。</title>
</head>
<body>
<script type="text/javascript">
// 1、在JS當中定義類
/* 這種創建類的方式也可以
User = function (usercode,username) {
}*/
function User(usercode,username) {
// 屬性
this.usercode = usercode;
this.username = username;
// 實例方法
this.doSome = function () {
alert(username+"doSome......");
}
// 靜態方法
User.doOther = function () {
alert(username+"doOther......")
}
}
//2、創建對象
// User(); 直接這樣調用，你只是把它當做一個普通的函數去執行，不會創建對象，在堆中沒有這個對象。
// new User(); 這樣調用的話，其實就是調用該類的構造方法，創建對象，并且在堆中分配空間。
var user = new User("111","zhangsan");
// 訪問屬性
alert(user.usercode+" , "+user.username);
// 調用實例方法
user.doSome();
// 調用靜態方法
User.doOther();
//3、后期新增一個fly方法，使用prototype屬性
User.prototype.fly = function () {
alert("飛翔.............")
}
// 調用擴展的方法
user.fly();
</script>
</body>
</html>繼續進行改造：把onclick和innerHTML封裝成click()和html()函數，一定要封裝徹底！
先封裝innerHTML屬性
（1）把innerHTML屬性封裝成一個html方法，然后把參數傳進去即可。
（2）要搞明白是哪個對象進行條用，對于html方法，肯定還是封裝子啊jQuery對象里面，所以只能這個對象才能調用；而下面的$("#mydiv")我們原來返回的是一個domobj對象；所以要進行修改，返回一個new jQuery。
（3）并封裝好html方法，傳一個字符串，把這個字符串傳給domObj.innerHTML；但是問題又來了原來寫的domObj對象是局部變量，外面并不能調用，所以要把var去掉變成全局變量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
function jQuery(selector) {
// 如果是字符串
if (typeof selector == "string") {
// 看開頭是不是#
if (selector.charAt(0) == "#") {
//截掉#，然后傳進去
// 去掉var改為全局變量
domObj = document.getElementById(selector.substring(1));
// 返回一個jQuery對象，下面才能正常調用html方法
return new jQuery();
}
}
// 如果是一個函數：頁面加載完畢，注冊回調函數
if (typeof selector == "function") {
window.onload = selector
}
// 封裝html方法，代替domObj.innerHTML = ""
this.html = function (htmlStr) {
domObj.innerHTML = htmlStr
}
}
// 把函數名賦給一個變量
$ = jQuery;
$(function () {
$("#mybtn").onclick = function () {
// 此時會有一個問題，domObj下沒有html方法
// 所以在jQuery中封裝一個html方法，返回一個jQuery即可
$("#mydiv").html("<font color='red'>Hello</font>");
}
})
</script>
<button id="mybtn">顯示信息</button>
<div id="mydiv">
</div>
</body>
</html>在封裝onclick屬性
既然我們返回的是jQuery屬性，所以$("#mybtn").onclick肯定會有問題，只有domObj這個對象才有onclick屬性，所以要對onclick屬性進行封裝，封裝要徹底！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
function jQuery(selector) {
// 如果是字符串
if (typeof selector == "string") {
// 看開頭是不是#
if (selector.charAt(0) == "#") {
//截掉#，然后傳進去
// 去掉var改為全局變量
domObj = document.getElementById(selector.substring(1));
// 返回一個jQuery對象，下面才能正常調用html方法
return new jQuery();
}
}
// 如果是一個函數：頁面加載完畢，注冊回調函數
if (typeof selector == "function") {
window.onload = selector
}
// 封裝html方法，代替domObj.innerHTML = ""
this.html = function (htmlStr) {
domObj.innerHTML = htmlStr
}
// 封裝onclick方法，直接傳一個函數，代替：domObj.onclick = function(){}
this.click = function (fun) {
domObj.onclick = fun
}
}
// 把函數名賦給一個變量
$ = jQuery;
$(function () {
// 把整個函數直接傳過去
$("#mybtn").click(function () {
// 此時會有一個問題，domObj下沒有html方法
// 所以在jQuery中封裝一個html方法，返回一個jQuery即可
$("#mydiv").html("<font color='red'>Hello</font>");
})
})
</script>
<body>
<button id="mybtn">顯示信息</button>
<div id="div">
</div>
</body>
</html>⑤將jQuery單獨寫到js文件中使用時引入庫
在web目目下創建一個js目錄，把我們前面封裝好的代碼放到一個.js文件，然后扔進js目錄下；并且使用這個之前，需要先把它引進去！
function jQuery(selector){
if (typeof selector == "string") {
if (selector.charAt(0) == "#") {
domObj = document.getElementById(selector.substring(1))
return new jQuery()
}
}
if (typeof selector == "function") {
window.onload = selector
}
this.html = function(htmlStr){
domObj.innerHTML = htmlStr
}
this.click = function(fun){
domObj.onclick = fun
}
this.focus = function (fun){
domObj.onfocus = fun
}
this.blur = function(fun) {
domObj.onblur = fun
}
this.change = function (fun){
domObj.onchange = fun
}
this.val = function(v){
if (v == undefined) {
return domObj.value
}else{
domObj.value = v
}
}
使用封裝好的函數進行調用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試自己編寫的jQuery</title>
</head>
<body>
<!--使用jQuery庫，需要先引進來-->
<script type="text/javascript" src="js/jQuery-1.0.0.js"></script>
<script type="text/javascript">
// 常規寫法
window.onload = function(){
document.getElementById("btn").onclick = function () {
alert("hello1")
}
}
// 使用我們自己寫的庫
$(function () {
$("#btn").click(function () {
//alert("hello2");
// 獲取文本框的內容
alert($("#username").val())
// 修改文本框的value
$("#username").val("張三")
// 設置div的內容
$("#mydiv").html("<font color='red'>你好</font>")
})
})
</script>
<button id="btn">hello</button><br>
用戶名：<input type="text" id="username"><br>
<div id="mydiv"></div>
</body>
</html>4、手動封裝一個jQuery庫
①將整個Ajax請求的步驟封裝到jQuery-1.0.0.js當中
只針對傳過來的數據是JSON格式的數據來封裝！
②原型代碼：
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>將AJAX代碼進行封裝，封裝到jQuery庫當中</title>
</head>
<body>
<!--原碼-->
<script type="text/javascript">
window.onload = function () {
document.getElementById("btn").onclick = function () {
// 創建對象
var xhr = new XMLHttpRequest();
// 注冊回調函數
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
// 只針對JSON格式的數據
var jsonObj = JSON.parse(this.responseText);
// 把數據放入到div里
document.getElementById("mydiv").innerHTML = jsonObj.username
}else {
alert(this.status)
}
}
}
// 打開通道
xhr.open("POST","/ajax/ajaxrequest10",true)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 發送請求
var username = document.getElementById("username").value;
xhr.send("username="+username);
}
}
</script>
<button id="btn">發送ajax請求</button><br>
用戶名：<input type="text" id="username"><br>
<div id="mydiv"></div><br>
</body>
</html>后端
package com.bjpowernode.javaweb.ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* @Package：com.bjpowernode.javaweb.ajax
* @Project：ajax
*/
@WebServlet("/ajaxrequest10")
public class AjaxRequest10Servlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
// 獲取前端提交的數據
String username = request.getParameter("username");
// 以JSON格式數據提交
out.print(" {\"username\" : \""+username+"\"}");
}
}我們發現原型代碼很多重復的，不夠簡練，所以下面進行封裝一下
③使用封裝好的jQuery-1.0.0.js：
這個庫封裝好以后，要想調用，必須先使用src屬性引入，例如：
<script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js">
手動封裝一個jQuery庫
function jQuery(selector){
if (typeof selector == "string") {
if (selector.charAt(0) == "#") {
domObj = document.getElementById(selector.substring(1))
return new jQuery()
}
}
if (typeof selector == "function") {
window.onload = selector
}
this.html = function(htmlStr){
domObj.innerHTML = htmlStr
}
this.click = function(fun){
domObj.onclick = fun
}
this.focus = function (fun){
domObj.onfocus = fun
}
this.blur = function(fun) {
domObj.onblur = fun
}
this.change = function (fun){
domObj.onchange = fun
}
this.val = function(v){
if (v == undefined) {
return domObj.value
}else{
domObj.value = v
}
}
// 靜態的方法，發送ajax請求
/**
* 分析：使用ajax函數發送ajax請求的時候，需要程序員給我們傳過來什么？
* 請求的方式(type)：GET/POST
* 請求的URL(url)：url
* 請求時提交的數據(data)：data
* 請求時發送異步請求還是同步請求(async)：true表示異步，false表示同步。
*/
jQuery.ajax = function(jsonArgs){ // 接收前端代碼傳過來的json數據
// 創建對象
var xhr = new XMLHttpRequest();
// 注冊回調函數
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
// 只針對JSON格式的數據，這個是服務器響應回來的JSON格式代碼
var jsonObj = JSON.parse(this.responseText);
// 把數據放入到div里
// 調用函數
jsonArgs.success(jsonObj)
}else {
alert(this.status)
}
}
}
// 打開通道，看是那種請求方式
if (jsonArgs.type.toUpperCase() == "POST") {// 如果是POST請求
xhr.open("POST",jsonArgs.url,jsonArgs.async)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 發送請求
xhr.send(jsonArgs.data);
}
if (jsonArgs.type.toUpperCase() == "GET") {// 如果是GET請求
xhr.open("GET",jsonArgs.url+"?"+jsonArgs.data,jsonArgs.async)
// 發送請求
xhr.send();
}
}
}
$ = jQuery
// 細節：執行這個目的是為了讓上面的靜態方法ajax生效。
new jQuery()
前端代碼：前端在編寫Ajax四步就可以前不一樣了，直接調用jQuery庫中封裝好的函數傳過去JSON數據即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>將AJAX代碼進行封裝，封裝到jQuery庫當中</title>
</head>
<body>
<!--原碼-->
<script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
// 調用jQuery的工具類中的ajax方法來發送ajax請求
/*var username = document.getElementById("username").value
$.ajax({
type : "POST",
url : "/ajax/request10",
data : "username=" + username,
async : true,
// 程序響應回來之后，對于客戶端來說要拿到響應的數據，然后解析這個數據，展示到頁面上。
success : function(json){
document.getElementById("mydiv").innerHTML = json.uname
}
})*/
// 進一步優化
$.ajax({
type : "POST",
url : "/ajax/request10",
data : "username=" + $("#username").val(),
async : true,
// 程序響應回來之后，對于客戶端來說要拿到響應的數據，然后解析這個數據，展示到頁面上。
success : function(json){
$("#mydiv").html( json.uname)
}
})
})
})
</script>
<button id="btn">發送ajax請求</button>
<br>
用戶名：<input type="text" id="username"><br>
<div id="mydiv"></div>
<br>
</body>
</html>后端代碼：得到前端發送的數據后，也響應回去一個JSON格式的數據
package com.bjpowernode.javaweb.ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* @Package：com.bjpowernode.javaweb.ajax
* @Project：ajax
* @name：AjaxRequest10Servlet
*/
@WebServlet("/request10")
public class AjaxRequest10Servlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 設置響應的類型
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
// 獲得前端提交的數據
String username = request.getParameter("username");
// 響應給瀏覽器
out.print("{\"uname\" : \""+username+"\"}");
}
}原文鏈接：https://blog.csdn.net/m0_61933976/article/details/128225679
相關推薦
- 2022-04-14 Django執行指定腳本的幾種方法_python
- 2022-04-23 uniapp封裝本地存儲處理數據的方法和具體使用
- 2022-09-25 如何對已有docker容器增加新的端口映射詳解_docker
- 2023-07-26 webpack提供構建速度之打包開啟多進程（thead）
- 2023-07-28 el-table 合并單元格（合并行）
- 2022-06-28 python神經網絡學習利用PyTorch進行回歸運算_python
- 2022-10-16 安裝出現:Requirement?already?satisfied解決辦法_python
- 2023-04-06 C語言中的多行輸入問題及說明_C 語言
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速