Beispiel zur Erteilung von ajax-Daten mit beego

1. Was ist AJAX

Asynchronous JavaScript And XML (AJAX) ist eine Technologie zur Erstellung interaktiver Webanwendungen

Ajax ist eine Technologie, um Teile einer Webseite zu aktualisieren, ohne die gesamte Webseite neu laden zu müssen.

2. Wie verwendet man AJAX

XMLHttpRequest ist die Grundlage von AJAX.

XMLHttpRequest wird verwendet, um Daten im Hintergrund mit dem Server auszutauschen. Dies bedeutet, dass ein Teil der Seite ohne Neuladen der gesamten Webseite aktualisiert werden kann.

AJAX kann in etwa in vier Schritten verwendet werden

1. Erstellen Sie ein XMLHttpRequest-Objekt

//js-Code zum Erhalten des XMLHttpRequest-Objekts (gespeichert als util.js)
function getXmlHttpRequest() {
  var xhr;
  try {
    // Firefox, Opera 8.0+, Safari
    xhr = new XMLHttpRequest();
  } catch (e) {
    // Internet Explorer
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        alert("Ihr Browser unterstützt AJAX nicht!");
        return false;
      }
    }
  }
  return xhr;
}

2. Registrieren Sie den Status-Rückruffunktion (wird aufgerufen, wenn der readyState des XMLHttpRequest-Objekts每次发生变化)

//Wenn xhr.readyState == 4bedeutet, dass alle Schritte abgeschlossen sind
//Wenn xhr.state == 200 bedeutet, dass die Ausführung erfolgreich war
 xhr.onreadystatechange=function(){
  if(xhr.readyState == 4 && xhr.state == 200){
    alert("Die Anfrage wurde vollständig ausgeführt und erfolgreich beendet");
  }
}

3. Erstellen Sie eine asynchrone Verbindung zum Server (standardmäßig asynchron)

/**
 open(method,url,async) Methode
 Definieren Sie den Typ der Anfrage, die URL und ob die Anfrage asynchron bearbeitet wird.
 Method: Der Typ der Anfrage; GET oder POST
 URL: Der URL zur Anfrage, die abgearbeitet werden soll
 async: true (asynchron) oder false (synchron) }}
 durch time sicherzustellen, dass每次发送新的请求
*/
xhr.open("Post", "/detailsU?time=" + new Date().getTime());

4. Senden Sie asynchrone Anfragen

/**
 json-formatierten String im send-Methode senden
*/
xhr.send('{"Index":"'+index +'", "Change":"' + i +'"}');

Durch die oben genannten vier Schritte können Sie den Request erfolgreich senden

Quellcode beifügen:

{{range .PhoneDetails}}  
    <tr onclick="func1(this)">
      <th>{{.Id}}</th>
      <th>{{.Name}}</th>
      <th>{{.Price}}</th>
      <th>{{.Repertory}}</th>
      <th>
        <a href="">Bearbeiten
      </th>
      <script type="text/javascript" src="/static/js/util.js"></script>
      <script type="text/javascript">
        function func1(x) {
          var code = prompt("Bitte geben Sie die angepasste Lagergröße ein:");
          if(code != null && code != "") {
            var i = parseInt(code);
            if(isNaN(i)) {
              alert('Fehlerhafte Eingabe');
            } else {
              var xhr = getXmlHttpRequest();
              xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.state == 200) {
                  alert("Die Anfrage wurde vollständig ausgeführt und erfolgreich beendet");
                }
              }
              var index = x.rowIndex;
              xhr.open("Post", "/detailsU?time=" + new Date().getTime());
              xhr.send('{"Index":"' + index + '", "Change":"' + i + '"}');
              alert('Änderung erfolgreich');
            }
          } else {
            alert('Fehlerhafte Eingabe');
          }
        }
      </script>
    </tr>
    {{end}}

3. Verarbeiten Sie die AJAX-Anfragen in beego

1. Erstellen Sie zunächst im models层的models.go die Datenstruktur

/**
 muss mit dem übergebenen JSON-Format-String übereinstimmen
 '{"Index":"'+index +'", "Change":"' + i +'"}
*/
type Object struct {
 Index String
 String ändern
}

2. Registrieren Sie die entsprechenden Routen

/**
 In main.go die entsprechenden Routen registrieren (achten Sie darauf, dass sie mit den entsprechenden Routeneinstellungen übereinstimmen)
 xhr.open("Post", "/detailsU?time=" + new Date().getTime());
 "Post:DoUpdate" wird verwendet, um die Funktion zu registrieren, die bei einer Anfrage mit dem POST-Verfahren an diese URL verarbeitet wird
*/
beego.Router("/detailsU", &controllers.DetailController{}, "Post:DoUpdate")

3. Schreiben Sie die entsprechenden Verarbeitungsfunktionen im Controller

/**
 Verarbeitung der Anfragen in den entsprechenden Funktionen
 json.Unmarshal(this.Ctx.Input.RequestBody, ob)
 Daten, die über JSON übertragen werden, werden dekodiert und in das ob-Objekt gespeichert
 In app.conf wird copyrequestbody = true eingestellt
*/
func (this *DetailController) DoUpdate(){
    ob := &models.Object{}
    json.Unmarshal(this.Ctx.Input.RequestBody, ob)
    db, err := sql.Open("mysql", "Benutzername:Passwort@tcp(IP:3306)/Datenbankname)
    result, err := db.Exec("UPDATE Datenbankname SET Feld = ? WHERE id = ?",ob.Change, ob.Index);
    if err != nil{
      beego.Error(err)
      return
    }
       fmt.Println(result)
    }
}

Dieser Beispielcode für das Abrufen von AJAX-Daten mit beego ist alles, was der Autor weitergegeben hat. Ich hoffe, es hilft Ihnen als Referenz und ich hoffe, dass Sie die Unterstützung und den Beifall von Anleitungshilfe geben.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet entnommen und gehört dem Urheberrecht des jeweiligen Urhebers. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige urheberrechtlich geschützte Inhalte finden, freuen wir uns über eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @ beim Senden von E-Mails und geben Sie relevante Beweise an. Sobald nachgewiesen wird, dass Inhalte urheberrechtlich geschützt sind, wird diese Website die betreffenden Inhalte sofort löschen.)