Ejemplo de obtención de datos AJAX con 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("La solicitud se ha ejecutado completamente y con éxito");
  }
}

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

/**
 open(method,url,async)方法
 规定请求的类型、URL 以及是否异步处理请求。
 method：请求的类型；GET 或 POST
 url：处理请求的URL
 async: true (asincrónico) o false (sincrónico)}}
 Asegúrese de enviar nuevas solicitudes cada vez mediante time
*/
xhr.open("Post", "/detailsU?time=" + new Date().getTime());

4. Realice solicitudes asincrónicas

/**
 enviando una cadena de formato JSON en el método send
*/
xhr.send('{"Index":"'+índice +'", "Change":"' + i +'"}');

Con estos cuatro pasos, puede enviar la solicitud con éxito

Código fuente adjunto:

{{range .PhoneDetails}}  
    <tr onclick="func1(this)">
      <th>{{.Id}}</th>
      <th>{{.Name}}</th>
      <th>{{.Price}}</th>
      <th>{{.Repertory}}</th>
      <th>
        <a href="">Editar
      </th>
      <script type="text/javascript" src="/static/js/util.js"></script>
      <script type="text/javascript">
        function func1(x) {
          var code = prompt("Por favor, ingrese el tamaño de inventario ajustado:");
          if(code != null && code != "") {
            var i = parseInt(code);
            if(isNaN(i)) {
              alert('Error de entrada');
            } else {
              var xhr = getXmlHttpRequest();
              xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.state == 200) {
                  alert("La solicitud se ha ejecutado completamente y con éxito");
                }
              }
              var index = x.rowIndex;
              xhr.open("Post", "/detailsU?time=" + new Date().getTime());
              xhr.send('{"Index":"' + índice + '", "Change":"' + i + '"}');
              alert('Modificación exitosa');
            }
          } else {
            alert('Error de entrada');
          }
        }
      </script>
    </tr>
    {{end}}

3. Maneje las solicitudes AJAX en beego

1. Primero cree la estructura de datos en models.go del nivel models

/**
 debe coincidir con la cadena de formato JSON transmitida
 '{"Index":"'+índice +'", "Change":"' + i +'"}
*/
type Object struct {
 Índice de cadena
 Cambiar cadena
}

2. Registre las rutas correspondientes

/**
 En main.go, registre las rutas correspondientes (tenga en cuenta que estén configuradas correctamente)
 xhr.open("Post", "/detailsU?time=" + new Date().getTime());
 "Post:DoUpdate" se utiliza para registrar la función de procesamiento de solicitudes que maneja las solicitudes de método Post para esta URL
*/
beego.Router("/detailsU", &controllers.DetailController{}, "Post:DoUpdate")

3. Escriba la función de manejo correspondiente en el controlador

/**
 Manejo de solicitudes correspondientes en la función correspondiente
 json.Unmarshal(this.Ctx.Input.RequestBody, ob)
 Análisis de datos transmitidos mediante json y almacenamiento de datos en el objeto ob
 En app.conf configure copyrequestbody = true
*/
func (this *DetailController) DoUpdate(){
    ob := &models.Object{}
    json.Unmarshal(this.Ctx.Input.RequestBody, ob)
    db, err := sql.Open("mysql", "usuario:contraseña@tcp(IP:3306)/nombre_de_base_de_datos)
    result, err := db.Exec("UPDATE nombre_de_tabla SET campo= ? WHERE id = ?",ob.Change, ob.Index)
    if err != nil{
      beego.Error(err)
      return
    }
       fmt.Println(result)
    }
}

Este ejemplo de obtención de datos AJAX de beego que se comparte con todos es todo el contenido que el editor tiene para compartir, espero que pueda ser útil para todos y espero que todos lo apoyen y griten tutorial.

Declaración: El contenido de este artículo se obtiene de la red, pertenece al autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha procesado editorialmente y no asume la responsabilidad de las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @ para denunciar y proporcionar evidencia. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción de derechos de autor.)