CFSDN nhấn mạnh vào việc tạo ra giá trị thông qua mã nguồn mở. Chúng tôi cam kết xây dựng một nền tảng chia sẻ tài nguyên để mọi người làm CNTT có thể tìm thấy thế giới tuyệt vời của riêng mình tại đây.
Bài đăng trên blog CFSDN này Các ví dụ của Beego về việc lấy dữ liệu ajax được tác giả thu thập và sắp xếp. Nếu bạn quan tâm đến bài viết này, hãy nhớ thích nó.
1. AJAX là gì?
JavaScript và XML không đồng bộ là công nghệ phát triển web để tạo các ứng dụng web tương tác.
Ajax là một kỹ thuật cho phép cập nhật một số phần của trang web mà không cần tải lại toàn bộ trang.
2. Cách sử dụng AJAX.
XMLHttpRequest là nền tảng của AJAX.
XMLHttpRequest được sử dụng để trao đổi dữ liệu với máy chủ ở chế độ nền. Điều này có nghĩa là một số phần của trang web có thể được cập nhật mà không cần tải lại toàn bộ trang.
Việc sử dụng AJAX được chia thành bốn bước.
1. Tạo đối tượng XMLHttpRequest.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
hai mươi mốt
|
//mã js để lấy đối tượng XMLHttpRequest (lưu dưới dạng util.js)
hàm getXmlHttpRequest() {
biến xhr;
thử {
// Firefox, Opera 8.0+, Safari
xhr = XMLHttpRequest mới();
} bắt (e) {
// Trình duyệt Internet
thử {
xhr = ActiveXObject mới("Msxml2.XMLHTTP");
} bắt (e) {
thử {
xhr = ActiveXObject mới ("Microsoft.XMLHTTP");
} bắt (e) {
alert("Trình duyệt của bạn không hỗ trợ AJAX!");
trả về false;
}
}
}
trả về xhr;
}
|
2. Đăng ký hàm gọi lại trạng thái (hàm gọi lại được gọi mỗi khi readyState của đối tượng XMLHttpRequest thay đổi).
?
1
2
3
4
5
6
7
|
//Khi xhr.readyState == 4, tất cả các bước đã được thực hiện
//Khi xhr.state == 200, điều đó có nghĩa là nó đã được thực thi đúng
xhr.onreadystatechange=hàm(){
nếu(xhr.readyState == 4 && xhr.state == 200){
alter("Yêu cầu đã được thực hiện đầy đủ và thành công");
}
}
|
3. Thiết lập kết nối không đồng bộ với máy chủ (mặc định là không đồng bộ).
?
1
2
3
4
5
6
7
8
9
|
/**
phương thức mở(phương thức,url,async)
Chỉ định loại yêu cầu, URL và liệu có xử lý yêu cầu theo cách không đồng bộ hay không.
phương pháp: loại yêu cầu; GET hoặc POST
url: url của yêu cầu cần xử lý
async: true (không đồng bộ) hoặc false (đồng bộ)
Sử dụng thời gian để đảm bảo rằng mỗi yêu cầu mới được gửi
*/
xhr.open("Bài đăng", "/detailsU?time=" + new Date().getTime());
|
4. Gửi yêu cầu không đồng bộ.
?
1
2
3
4
|
/**
Phương thức Send gửi một chuỗi ở định dạng json
*/
xhr.send('{"Index":"'+index +'", "Thay đổi":"' + i +'"}');
|
Thông qua bốn bước trên, bạn có thể gửi yêu cầu thành công.
Mã nguồn đính kèm:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
hai mươi mốt
hai mươi hai
hai mươi ba
hai mươi bốn
25
26
27
28
29
30
31
32
33
34
35
36
|
{{phạm vi .PhoneDetails}}
<
tr
nhấp chuột
=
"func1(này)"
>
<
th
>{{.Id}}
th
>
<
th
>{{.Tên}}
th
>
<
th
>{{.Giá}}
th
>
<
th
>{{.Danh mục}}
th
>
<
th
>
<
Một
href
=
""
>Chỉnh sửa
th
>
<
kịch bản
kiểu
=
"văn bản/javascript"
nguồn
=
"/static/js/util.js"
>
kịch bản
>
<
kịch bản
kiểu
=
"văn bản/javascript"
>
hàm func1(x) {
var code = prompt("Vui lòng nhập kích thước hàng tồn kho đã điều chỉnh:");
nếu(mã != null && mã != "") {
var i = parseInt(mã);
nếu(isNaN(i)) {
cảnh báo('Lỗi nhập');
} khác {
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = hàm() {
nếu(xhr.readyState == 4 && xhr.state == 200) {
alter("Yêu cầu đã được thực hiện đầy đủ và thành công");
}
}
var index = x.rowIndex;
xhr.open("Bài đăng", "/detailsU?time=" + new Date().getTime());
xhr.send('{"Index":"' + index + '", "Thay đổi":"' + i + '"}');
alert('Sửa đổi thành công');
}
} khác {
cảnh báo('Lỗi nhập');
}
}
kịch bản
>
tr
>
{{kết thúc}}
|
3. Xử lý các yêu cầu AJAX trong beego.
1. Đầu tiên, tạo cấu trúc dữ liệu trong models.go của lớp models.
?
1
2
3
4
5
6
7
8
|
/**
Để tương ứng với chuỗi định dạng json được truyền vào
'{"Index":"'+index +'", "Thay đổi":"' + i +'"}'
*/
Kiểu đối tượng struct {
Chuỗi chỉ mục
Thay đổi chuỗi
}
|
2. Đăng ký tuyến đường tương ứng.
?
1
2
3
4
5
6
|
/**
Đăng ký tuyến đường tương ứng trong main.go (lưu ý rằng tuyến đường tương ứng đã được thiết lập)
xhr.open("Bài đăng", "/detailsU?time=" + new Date().getTime());
"Post:DoUpdate" được sử dụng để đăng ký hàm được xử lý khi phương thức Post yêu cầu URL
*/
beego.Router("/detailsU", &controllers.DetailController{}, "Bài đăng:DoUpdate")
|
3. Viết hàm xử lý tương ứng trong bộ điều khiển.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
/**
Xử lý yêu cầu tương ứng trong chức năng tương ứng
json.Unmarshal(this.Ctx.Input.RequestBody, ob)
Phân tích dữ liệu đến thông qua json và lưu trữ dữ liệu trong đối tượng ob
Đặt copyrequestbody = true trong app.conf
*/
func (this *DetailController) DoUpdate(){
ob := &models.Đối tượng{}
json.Unmarshal(this.Ctx.Input.RequestBody, ob)
db, err := sql.Open("mysql", "tên người dùng:mật khẩu@tcp(IP:3306)/tên cơ sở dữ liệu")
kết quả, lỗi := db.Exec("CẬP NHẬT tên bảng ĐẶT trường = ? NƠI id = ?", ob.Change, ob.Index)
nếu err != nil{
beego.Lỗi(err)
trở lại
}khác{
fmt.Println(kết quả)
}
}
|
Ví dụ trên về cách lấy dữ liệu ajax từ beego là tất cả những gì tôi muốn chia sẻ với bạn. Tôi hy vọng nó có thể là tài liệu tham khảo cho bạn và tôi hy vọng bạn sẽ ủng hộ tôi.
Liên kết gốc: http://blog.csdn.net/s_842499467/article/details/78831800.
Cuối cùng, bài viết này về ví dụ về cách Beego lấy dữ liệu ajax kết thúc tại đây. Nếu bạn muốn biết thêm về ví dụ về cách Beego lấy dữ liệu ajax, vui lòng tìm kiếm các bài viết trên CFSDN hoặc tiếp tục duyệt các bài viết liên quan. Tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .
Tôi là một lập trình viên xuất sắc, rất giỏi!