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æ°æ®çå®ä¾å°±æ¯å°ç¼å享ç»å¤§å®¶çå¨é¨å容äºï¼å¸æè½ç»å¤§å®¶ä¸ä¸ªåèï¼ä¹å¸æ大家å¤å¤æ¯æèæ¬ä¹å®¶ã