Comment obtenir le backend de bootstrap

Utilisez Bootstrap pour obtenir des données backend peut être complétée via la demande Ajax. Les étapes sont les suivantes: initialisez la demande AJAX; Écoutez la réponse du serveur; Ouvrez la demande, spécifiez la méthode (telle que GET) et URL; envoyer la demande; analyser la réponse du serveur (JSON ou XML); Mettez à jour l'élément DOM.

Comment utiliser Bootstrap pour obtenir des données backend

Bootstrap est un cadre frontal populaire pour créer des applications Web interactives et réactives. Bien que Bootstrap ne fournisse pas les connexions directement au backend, les données peuvent être récupérées du backend en utilisant des demandes AJAX (Asynchronous JavaScript et XML).

étape:

1. Initialiser la demande Ajax

Initialisez la demande AJAX à l'aide de l'objet XMLHttpRequest .

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

2. Écoutez la réponse du serveur

Utilisez onreadystatechange pour écouter les réponses du serveur.

 <code class="javascript">request.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { // 处理服务器响应} };</code>

3. Ouvrez la demande

Ouvrez une demande HTTP, spécifiant une méthode (telle que Get ou Post) et URL.

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

4. Envoyez une demande

Envoyez une demande Ajax.

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

5. Résoudre la réponse du serveur

Lorsqu'une réponse est reçue, analysez les données de réponse JSON ou XML.

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

6. Mettez à jour le DOM

Mettez à jour l'élément DOM avec les données obtenues à partir du backend.

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

Exemple:

L'exemple suivant montre comment utiliser Bootstrap Modal pour obtenir et afficher les données du backend.

 <code class="html"><!-- Modal 内容--> <div class="modal-body"> <div id="response-message"></div> </div> <!-- 发送请求按钮--> <button type="button" class="btn btn-primary" id="submit-button">发送请求</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(); // 监听服务器响应request.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { // 解析服务器响应const data = JSON.parse(request.responseText); // 更新DOM responseMessage.innerHTML = data.message; // 显示Modal modal.toggle(); } }; // 打开请求request.open("GET", "your-endpoint-url", true); // 发送请求request.send(); });</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!