Exemple d'obtention de données AJAX avec beego

1. 什么是AJAX

Asynchronous JavaScript And XML（异步 JavaScript 及 XML），是指一种创建交互式网页应用的网页开发技术

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

2. 如何使用 AJAX

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

使用AJAX大致分四步

1. 创建XMLHttpRequest 对象

//js代码获取XMLHttpRequest 对象（保存为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("您的浏览器不支持AJAX！");
        return false;
      }
    }
  }
  return xhr;
}

2注册状态回调函数（当XMLHttpRequest 对象的readyState每次发生变化时调用该回调函数）

//当xhr.readyState == 4时所有的步骤都已执行完毕
//当xhr.state == 200时表示已经正确执行
 xhr.onreadystatechange=function(){
  if(xhr.readyState == 4 && xhr.state == 200){
    alert("Toute la requête a été exécutée avec succès");
  }
}

3建立与服务器的异步连接（默认为异步）

/**
 open(method,url,async)方法
 规定请求的类型、URL 以及是否异步处理请求。
 method：请求的类型；GET 或 POST
 url：处理请求的URL
 async : true (asynchrone) ou false (synchronisé)
 En utilisant time pour garantir que chaque nouvelle requête est envoyée
*/
xhr.open("Post", "/detailsU?time=" + new Date().getTime());

4. Envoyer une requête asynchrone

/**
 envoyer une chaîne JSON au sein de la méthode send
*/
xhr.send('{"Index":"'+index +'", "Change":"' + i +'"}');

Avec ces quatre étapes, vous pouvez envoyer avec succès la requête

Code source joint :

{{range .PhoneDetails}}  
    <tr onclick="func1(this)">
      <th>{{.Id}}</th>
      <th>{{.Name}}</th>
      <th>{{.Price}}</th>
      <th>{{.Repertory}}</th>
      <th>
        <a href="">Éditer
      </th>
      <script type="text/javascript" src="/static/js/util.js"></script>
      <script type="text/javascript">
        function func1(x) {
          var code = prompt("Veuillez saisir la taille de stock à ajuster :");
          if(code != null && code != "") {
            var i = parseInt(code);
            if(isNaN(i)) {
              alert('Erreur d'entrée');
            } else {
              var xhr = getXmlHttpRequest();
              xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.state == 200) {
                  alert("Toute la requête a été exécutée avec succès");
                }
              }
              var index = x.rowIndex;
              xhr.open("Post", "/detailsU?time=" + new Date().getTime());
              xhr.send('{"Index":"' + index + '", "Change":"' + i + '"}');
              alert('Modification réussie');
            }
          } else {
            alert('Erreur d'entrée');
          }
        }
      </script>
    </tr>
    {{end}}

3. Traitez les demandes AJAX dans beego

1. Créez d'abord la structure des données dans le fichier models.go du niveau models

/**
 Doit correspondre au format JSON transmis
 '{"Index":"'+index +'", "Change":"' + i +'"}
*/
type Object struct {
 Index une chaîne
 Changer une chaîne
}

2. Enregistrez les routes correspondantes

/**
 Dans le fichier main.go, enregistrez les routes correspondantes (attention à bien configurer les routes correspondantes)
 xhr.open("Post", "/detailsU?time=" + new Date().getTime());
 "Post:DoUpdate" est utilisé pour enregistrer la fonction de traitement de la requête POST pour cette URL
*/
beego.Router("/detailsU", &controllers.DetailController{}, "Post:DoUpdate")

3. Écrire les fonctions de traitement correspondantes dans le contrôleur

/**
 Traiter les requêtes correspondantes dans la fonction correspondante
 json.Unmarshal(this.Ctx.Input.RequestBody, ob)
 Analyser les données transmises via json et stocker les données dans l'objet ob
 Dans app.conf, définir copyrequestbody = true
*/
func (this *DetailController) DoUpdate(){
    ob := &models.Object{}
    json.Unmarshal(this.Ctx.Input.RequestBody, ob)
    db, err := sql.Open("mysql", "NomUtilisateur:MotDePasse@tcp(IP:3306)/NomBaseDeDonnees)
    result, err := db.Exec("UPDATE NomTable SET Champ= ? WHERE id = ?",ob.Change, ob.Index)
    if err != nil{
      beego.Error(err)
      return
    }
       fmt.Println(result)
    }
}

Cet exemple de récupération de données AJAX par beego est tout ce que l'éditeur partage avec vous. J'espère que cela vous servira de référence et que vous continuerez à soutenir le tutoriel de cri.

Déclaration : Le contenu de cet article est issu d'Internet, propriété des auteurs respectifs, contribué et téléchargé par les utilisateurs d'Internet. Ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu présumé violer les droits d'auteur, n'hésitez pas à envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu présumé violer les droits d'auteur.)