beego에서 ajax 데이터를 가져오는 예제

1. AJAX는 무엇인가요

Asynchronous JavaScript And XML(비동기 JavaScript 및 XML)은 인터랙티브 웹 애플리케이션을 개발하는 웹 개발 기술을 의미합니다

Ajax는 전체 웹 페이지를 다시 로드하지 않고 일부 웹 페이지를 업데이트할 수 있는 기술입니다.

2. AJAX 사용 방법

XMLHttpRequest은 AJAX의 기본입니다.

XMLHttpRequest은 배경에서 서버와 데이터를 교환하는 데 사용됩니다. 이는 전체 웹 페이지를 다시 로드하지 않고 웹 페이지의 일부를 업데이트할 수 있음을 의미합니다.

AJAX를 사용하는 것은大致 네 단계로 나눌 수 있습니다

1. XMLHttpRequest 객체를 생성합니다

//js 코드로 XMLHttpRequest 객체를 가져옵니다(utility.js에 저장)
function getXmlHttpRequest() {
  var xhr;
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
    // Firefox, Opera 8.0+, Safari
    xhr = new XMLHttpRequest();
  }
    // Internet Explorer
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
      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"을 통해 해당 URL에 대한 Post 메서드 요청을 처리하는 함수를 등록합니다.
*/
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
    }
       fmt.Println(result)
    }
}

이제 beego가 AJAX 데이터를 가져오는 예제는 저가 모두 공유한 것입니다. 많은 참고가 되길 바라며, 많은 지지와 외침 가이드를 기대합니다.

언급: 본 문서의 내용은 인터넷에서 가져왔으며, 저작권자는 본인입니다. 이 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 이 사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 위반이 의심되는 내용이 있으시면, 이메일을 notice#w로 발송하여 주시기 바랍니다.3codebox.com（이메일을 보내는 경우, #을 @으로 변경하십시오.）를 통해 신고하시고 관련 증거를 제공하시면, 해당 내용이 실제로 위반된 경우, 이 사이트는 즉시 해당 저작권 위반 내용을 삭제할 것입니다.