beego获取ajax数据的实例

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){
    alter("请求已全部执行，并且成功");
  }
}

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

/**
 open(method,url,async)方法
 规定请求的类型、url 以及是否异步处理请求。
 method：请求的类型；get 或 post
 url：相求处理请求的url
 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
 change string
}

2. 注册相应的路由

/**
 在main.go当中注册相应的路由（注意与对应路由设置好）
 xhr.open("post", "/detailsu?time=" + new date().gettime());
 "post:doupdate"用来注册当post方法请求该url处理的函数
*/
beego.router("/detailsu", &controllers.detailcontroller{}, "post:doupdate")

3. 在controller中写好相应的处理函数

/**
 在对应的函数中处理相应的请求
 json.unmarshal(this.ctx.input.requestbody, ob)
 通过json来解析穿过来的数据，并将数据存储在ob对象中
 在app.conf中设置copyrequestbody = true
*/
func (this *detailcontroller) doupdate(){
    ob := &models.object{}
    json.unmarshal(this.ctx.input.requestbody, ob)
    db, err := sql.open("mysql", "用户名:密码@tcp(ip:3306)/数据库名")
    result, err := db.exec("update 数据表名 set 字段= ? where id = ?",ob.change, ob.index)
    if err != nil{
      beego.error(err)
      return
    }else{
       fmt.println(result)
    }
}

以上这篇beego获取ajax数据的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。