Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    [AJAX] Prelevare uno specifico div

    Salve, mi sto avventurando in AJAX, e vorrei creare una pulsantiera che, per ciascun button, mi carichi un certo div con id="target" da differenti documenti di nome Documento1.html, Documento2.html, uguali al value dei button a meno dell'estensione.

    Di seguito il codice (tutto incluso in tag script), ma AJAX mi carica l'intero HTML, non la limitazione al target che credo di avergli dato con e.target.
    codice:
    // creo l'array dei button
    var documenti = document.getElementsByTagName("button");
            
    // programmo i button
    for (var i = 0; i < documenti.length; i++) { documenti[i].onclick = carica; }
            
    function carica(e) {
                var httpRequest = new XMLHttpRequest();
                httpRequest.onreadystatechange = gestisci;
                httpRequest.open("GET", e.target.innerHTML + ".html", true);
                httpRequest.send();
    }
    
    function gestisci(e) {
                
                if (e.target.readyState == 4 && e.target.status == 200) {
                    document.getElementById("qui").innerHTML = e.target.responseText;
                }
                
    }
    Nessun errore da console.

  2. #2
    Utente di HTML.it L'avatar di cassano
    Registrato dal
    Aug 2004
    Messaggi
    2,989
    Hai controllato cosa c'è in
    e.target.innerHTML ?

  3. #3
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,110
    Vedi su jquery puoi fare ciò che vuoi con due righe di codice
    Ultima modifica di cavicchiandrea; 08-11-2021 a 15:14

  4. #4
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    222
    verifica l'esempio.

    codice:
    <!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>
    </head>
    
    <button>doc1</button>
    <button>doc2</button>
    <div id="result"></div>
    
    <body>
        <script>
            // creo l'array dei button
            const buttons = document.getElementsByTagName("button")
            const result = document.getElementById('result')
            // programmo i buttons
            for (let i = 0; i < buttons.length; i++) { buttons[i].onclick = carica; }
    
            function carica(e) {
                const httpRequest = new XMLHttpRequest()
                httpRequest.responseType = 'text'
                httpRequest.open("GET", e.target.textContent + ".html", true)
                httpRequest.send()
                httpRequest.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        const DOM = new DOMParser()
                        const html = DOM.parseFromString(httpRequest.response, "text/html")
                        result.textContent = html.getElementById('qui').textContent
                    }
                }
            }
    
        </script>
    </body>
    
    </html>

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2022 vBulletin Solutions, Inc. All rights reserved.