Esempio di recupero dei dati AJAX con beego

1. Cos'è AJAX

Asynchronous JavaScript And XML (AJAX) si riferisce a una tecnologia di sviluppo web per creare applicazioni web interattive.

Ajax è una tecnologia che consente di aggiornare parti di una pagina web senza dover ricaricare l'intera pagina.

2. Come utilizzare AJAX

XMLHttpRequest è la base di AJAX.

XMLHttpRequest viene utilizzato per scambiare dati con il server in background. Questo significa che è possibile aggiornare una parte della pagina senza ricaricare l'intera pagina.

Usare AJAX si suddivide in quattro passaggi

1. Creare l'oggetto XMLHttpRequest

// Codice JavaScript per ottenere l'oggetto XMLHttpRequest (salvato come util.js)
function getXmlHttpRequest() {
  var xhr;
  try {
    // Firefox, Opera 8.0+, Safari
    xhr = new XMLHttpRequest();
  }
    // Internet Explorer
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
        alert("Il tuo browser non supporta AJAX!");
        return false;
      }
    }
  }
  return xhr;
}

2. Registrare la funzione di callback di stato (la funzione di callback viene chiamata ogni volta che il readyState dell'oggetto XMLHttpRequest cambia)

// Quando xhr.readyState == 4 indica che tutte le fasi sono state completate
// Quando xhr.state == 200 indica che è stato eseguito correttamente
 xhr.onreadystatechange=function(){
  if(xhr.readyState == 4 && xhr.state == 200){
    alert("Tutte le richieste sono state eseguite con successo");
  }
}

3. Creare una connessione asincrona con il server (predefinito come asincrono)

/**
 Metodo open(method,url,async)
 Definire il tipo di richiesta, l'URL e se il trattamento della richiesta è asincrono
 method: tipo di richiesta; GET o POST
 url: URL di gestione della richiesta
 async: true (asincrono) o false (sincrono)
 Garantire con time l'invio di nuove richieste ogni volta
*/
xhr.open("Post", "/detailsU?time=" + new Date().getTime());

4. Eseguire una richiesta asincrona

/**
 Inviare una stringa JSON nel metodo send
*/
xhr.send('{"Index":"'+index +'", "Change":"' + i +'"}');

Con questi quattro passaggi, è possibile inviare con successo la richiesta.

Codice sorgente allegato:

{{range .PhoneDetails}}  
    <tr onclick="func1(this)">}}
      <th>{{.Id}}</th>
      <th>{{.Name}}</th>
      <th>{{.Price}}</th>
      <th>{{.Repertory}}</th>
      <th>
        <a href="">Modifica
      </th>
      <script type="text/javascript" src="/static/js/util.js"></script>
      <script type="text/javascript">
        function func1(x) {
          var code = prompt("Inserisci la dimensione di adattamento dello stock:");
          if(code != null && code != "") {
            var i = parseInt(code);
            if(isNaN(i)) {
              alert('Errore di input');
            } else {
              var xhr = getXmlHttpRequest();
              xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.state == 200) {
                  alert("Tutte le richieste sono state eseguite con successo");
                }
              }
              var index = x.rowIndex;
              xhr.open("Post", "/detailsU?time=" + new Date().getTime());
              xhr.send('{"Index":"' + index + '", "Change":"' + i + '"}');
              alert('Modifica riuscita');
            }
          } else {
            alert('Errore di input');
          }
        }
      </script>
    </tr>
    {{end}}

3. Gestire le richieste AJAX in beego

1. Prima di tutto, creare la struttura dei dati nel file models.go del livello models

/**
 Deve corrispondere alla stringa JSON passata
 '{"Index":"'+index +'", "Change":"' + i +'"}'
*/
type Object struct {
 Indice stringa
 Cambia stringa
}

2. Registrare le rotte corrispondenti

/**
 Registrare le rotte corrispondenti in main.go (attenzione a configurare correttamente le rotte corrispondenti)
 xhr.open("Post", "/detailsU?time=" + new Date().getTime());
 "Post:DoUpdate" utilizzato per registrare la funzione che gestisce la richiesta POST di questo URL
*/
beego.Router("/detailsU", &controllers.DetailController{}, "Post:DoUpdate")

3. Scrivi le funzioni di gestione corrispondenti nel controller

/**
 Gestisci le richieste corrispondenti nelle funzioni corrispondenti
 json.Unmarshal(this.Ctx.Input.RequestBody, ob)
 Analizza i dati passati come json e memorizza i dati nell'oggetto ob
 Imposta copyrequestbody = true in app.conf
*/
func (this *DetailController) DoUpdate(){
    ob := &models.Object{}
    json.Unmarshal(this.Ctx.Input.RequestBody, ob)
    db, err := sql.Open("mysql", "nome_utente:password@tcp(IP:3306)/nome_database")
    result, err := db.Exec("UPDATE nome_tabella SET campo= ? WHERE id = ?", ob.Cambia, ob.Index)
    if err != nil{
      beego.Error(err)
      return
    }
       fmt.Println(result)
    }
}

Questo esempio di beego per ottenere dati AJAX è tutto ciò che ho condiviso con voi, spero che possa essere utile come riferimento, e spero che tutti possano sostenere la guida tutorial.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.