1. 什么是AJAX
Asynchronous JavaScript And XML（異步 JavaScript 及 XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)
Ajax 是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。
2. 如何使用 AJAX
XMLHttpRequest 是 AJAX 的基礎(chǔ)。
XMLHttpRequest 用于在后臺與服務(wù)器交換數(shù)據(jù)。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。
使用AJAX大致分四步
1. 創(chuàng)建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.注冊狀態(tài)回調(diào)函數(shù)（當(dāng)XMLHttpRequest 對象的readyState每次發(fā)生變化時調(diào)用該回調(diào)函數(shù)）
//當(dāng)xhr.readyState == 4時所有的步驟都已執(zhí)行完畢
//當(dāng)xhr.state == 200時表示已經(jīng)正確執(zhí)行
xhr.onreadystatechange=function(){
if(xhr.readyState == 4 xhr.state == 200){
alter("請求已全部執(zhí)行，并且成功");
}
}
3.建立與服務(wù)器的異步連接（默認(rèn)為異步）
/**
open(method,url,async)方法
規(guī)定請求的類型、URL 以及是否異步處理請求。
method：請求的類型；GET 或 POST
url：相求處理請求的url
async：true（異步）或 false（同步）
通過time來保證，每次發(fā)送新的請求
*/
xhr.open("Post", "/detailsU?time=" + new Date().getTime());
4.發(fā)出異步請求
/**
send方法中發(fā)送json格式的字符串
*/
xhr.send('{"Index":"'+index +'", "Change":"' + i +'"}');
通過以上四步就可以成功的發(fā)送請求了
附源碼：
{{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("請輸入調(diào)整的庫存大小：");
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("請求已全部執(zhí)行，并且成功");
}
}
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中創(chuàng)建數(shù)據(jù)的結(jié)構(gòu)
/**
要與傳過來的json格式字符串對應(yīng)
'{"Index":"'+index +'", "Change":"' + i +'"}'
*/
type Object struct {
Index string
Change string
}
2. 注冊相應(yīng)的路由
/**
在main.go當(dāng)中注冊相應(yīng)的路由（注意與對應(yīng)路由設(shè)置好）
xhr.open("Post", "/detailsU?time=" + new Date().getTime());
"Post:DoUpdate"用來注冊當(dāng)Post方法請求該URL處理的函數(shù)
*/
beego.Router("/detailsU", controllers.DetailController{}, "Post:DoUpdate")
3. 在controller中寫好相應(yīng)的處理函數(shù)
/**
在對應(yīng)的函數(shù)中處理相應(yīng)的請求
json.Unmarshal(this.Ctx.Input.RequestBody, ob)
通過json來解析穿過來的數(shù)據(jù)，并將數(shù)據(jù)存儲在ob對象中
在app.conf中設(shè)置copyrequestbody = true
*/
func (this *DetailController) DoUpdate(){
ob := models.Object{}
json.Unmarshal(this.Ctx.Input.RequestBody, ob)
db, err := sql.Open("mysql", "用戶名:密碼@tcp(IP:3306)/數(shù)據(jù)庫名")
result, err := db.Exec("UPDATE 數(shù)據(jù)表名 SET 字段= ? WHERE id = ?",ob.Change, ob.Index)
if err != nil{
beego.Error(err)
return
}else{
fmt.Println(result)
}
}
以上這篇beego獲取ajax數(shù)據(jù)的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
