Exemplo de obtenção de dados AJAX no beego

1. O que é AJAX

Asynchronous JavaScript And XML (AJAX), é uma tecnologia de desenvolvimento de aplicações web interativas

Ajax é uma tecnologia que permite atualizar parte de uma página sem recarregar toda a página.

2. Como usar AJAX

XMLHttpRequest é a base do AJAX.

XMLHttpRequest é usado para trocar dados com o servidor em segundo plano. Isso significa que é possível atualizar uma parte da página sem recarregar toda a página.

O AJAX pode ser dividido em aproximadamente quatro passos

1. Cria o objeto XMLHttpRequest

//Código JavaScript para obter o objeto XMLHttpRequest (salvo como 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("Seu navegador não suporta AJAX!");
        return false;
      }
    }
  }
  return xhr;
}

2. Registra a função de callback de estado (a função de callback é chamada sempre que o readyState do objeto XMLHttpRequest mudar)

//quando xhr.readyState == 4quando todos os passos foram executados
//quando xhr.state == 200 indica que foi executado corretamente
 xhr.onreadystatechange=function(){
  if(xhr.readyState == 4 && xhr.state == 200){
    alter("请求已全部执行，并且成功");
  }
}

3. Estabelece uma conexão assíncrona com o servidor (padrão é assíncrona)

/**
 Método open(method,url,async)
 Define o tipo de solicitação, URL e se a solicitação deve ser processada de forma assíncrona.
 method: Tipo de solicitação; GET ou POST
 url: URL para processar a solicitação
 async：true（异步）或 false（同步）
 通过time来保证，每次发送新的请求
*/
xhr.open("Post", "/detailsU?time=" + new Date().getTime());

4.发出异步请求

/**
 send方法中发送json格式的字符串
*/
xhr.send('{"Index":"'+index +'", "Change":"' + i +'"}');

通过以上四步就可以成功的发送请求了

附源码：

{{range .PhoneDetails}}  
    <tr onclick="func1(this)">
      <th>{{.Id}}</th>
      <th>{{.Name}}</th>
      <th>{{.Price}}</th>
      <th>{{.Repertory}}</th>
      <th>
        <a href="">编辑
      </th>
      <script type="text/javascript" src="/static/js/util.js"></script>
      <script type="text/javascript">
        function func1(x) {
          var code = prompt("请输入调整的库存大小：");
          if(code != null && code != "") {
            var i = parseInt(code);
            if(isNaN(i)) {
              alert('输入错误');
            } else {
              var xhr = getXmlHttpRequest();
              xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.state == 200) {
                  alter("请求已全部执行，并且成功");
                }
              }
              var index = x.rowIndex;
              xhr.open("Post", "/detailsU?time=" + new Date().getTime());
              xhr.send('{"Index":"' + index + '", "Change":"' + i + '"}');
              alert('修改成功');
            }
          } else {
            alert('输入错误');
          }
        }
      </script>
    </tr>
    {{end}}

3. 在beego中处理AJAX的请求

1. 首先在models层的models.go中创建数据的结构

/**
 要与传过来的json格式字符串对应
 '{"Index":"'+index +'", "Change":"' + i +'"}
*/
type Object struct {
 Index string
 Mudar string
}

2. 注册相应的路由

/**
 No main.go中注册相应的路由（注意与对应路由设置好）
 xhr.open("Post", "/detailsU?time=" + new Date().getTime());
 "Post:DoUpdate" é usado para registrar a função de tratamento do método POST para a URL
*/
beego.Router("/detailsU", &controllers.DetailController{}, "Post:DoUpdate")

3. Escreva as funções de tratamento correspondentes no controller

/**
 Trate as solicitações correspondentes nas funções apropriadas
 json.Unmarshal(this.Ctx.Input.RequestBody, ob)
 Análise de dados transmitidos via JSON e armazenamento dos dados no objeto ob
 Defina copyrequestbody = true no app.conf
*/
func (this *DetailController) DoUpdate(){
    ob := &models.Object{}
    json.Unmarshal(this.Ctx.Input.RequestBody, ob)
    db, err := sql.Open("mysql", "NomeDoUsuário:Senha@tcp(IP:3306)/NomeDoBancoDeDados)
    result, err := db.Exec("UPDATE NomeDaTabela SET Campo= ? WHERE id = ?",ob.Change, ob.Index)
    if err != nil{
      beego.Error(err)
      return
    }
       fmt.Println(result)
    }
}

Aqui está o exemplo de obtenção de dados AJAX do beego que o editor compartilha com você, espero que ajude a fornecer uma referência, e esperamos que você apóie e clamore pelo tutorial.

Declaração: O conteúdo deste artigo é proveniente da Internet, pertencente ao respectivo proprietário. O conteúdo é contribuído e carregado voluntariamente pelos usuários da Internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidades legais relacionadas.3codebox.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Em caso de verificação, o site deletará imediatamente o conteúdo suspeito de infringência de direitos autorais.)