?? ???? ???? AJAX ??? ?? ??? ???? ?? ? ????. ??? ??? ????. AJAX ?? ???; ?? ??? ????. ??? ?? ??? (? : get) ? URL? ?????. ??? ?????. ?? ?? (JSON ?? XML)? ?? ?????. DOM ??? ????????.

Bootstrap? ???? ??? ???? ?? ??

Bootstrap? ??? ? ?? ? ? ??????? ????? ???? ??? ?? ??? ?????. Bootstrap? ???? ?? ??? ???? ??? Ajax (??? JavaScript ? XML) ??? ???? ????? ???? ?? ? ? ????.

??:

1. AJAX ??? ???????

XMLHttpRequest ??? ???? ajax ??? ???????.

 <code class="javascript">const request = new XMLHttpRequest();</code>

2. ?? ??? ????

onreadystatechange ???? ???? ?? ??? ????.

 <code class="javascript">request.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { // 處理服務(wù)器響應(yīng)} };</code>

3. ??? ?? ?

HTTP ??? ?? ??? (? : get ?? post) ? URL? ?????.

 <code class="javascript">request.open("GET", "your-endpoint-url", true);</code>

4. ??? ?????

Ajax ??? ?????.

 <code class="javascript">request.send();</code>

5. ?? ??? ??????

??? ???? JSON ?? XML ?? ???? ?? ??????.

 <code class="javascript">const data = JSON.parse(request.responseText);</code>

6. DOM? ????????

????? ??? ???? DOM ??? ????????.

 <code class="javascript">document.getElementById("result").innerHTML = data.message;</code>

?:

?? ??? Bootstrap Modal? ???? ????? ???? ?? ???? ??? ?????.

 <code class="html"><!-- Modal 內(nèi)容--> <div class="modal-body"> <div id="response-message"></div> </div> <!-- 發(fā)送請求按鈕--> <button type="button" class="btn btn-primary" id="submit-button">發(fā)送請求</button></code>

 <code class="javascript">const modal = new bootstrap.Modal(document.getElementById("modal")); const responseMessage = document.getElementById("response-message"); const submitButton = document.getElementById("submit-button"); submitButton.addEventListener("click", () => { // 初始化AJAX 請求const request = new XMLHttpRequest(); // 監(jiān)聽服務(wù)器響應(yīng)request.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { // 解析服務(wù)器響應(yīng)const data = JSON.parse(request.responseText); // 更新DOM responseMessage.innerHTML = data.message; // 顯示Modal modal.toggle(); } }; // 打開請求request.open("GET", "your-endpoint-url", true); // 發(fā)送請求request.send(); });</code>

? ??? ?? ???? ???? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!