1. What is AJAX
Asynchronous JavaScript And XML (Asynchronous JavaScript and XML), refers to a web development technology that creates interactive web applications.
Ajax is a technology that can update some web pages without reloading the entire web page.
2. How to use AJAX
XMLHttpRequest is the basis of AJAX.
XMLHttpRequest is used to exchange data with the server in the background. This means that a part of the page can be updated without reloading the entire page.
Using AJAX roughly in four steps
1. Create XMLHttpRequest object
//js code gets XMLHttpRequest object (save as)function getXmlHttpRequest() {
var xhr;
try {
// Firefox, Opera 8.0+, Safari
xhr = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xhr = new ActiveXObject("");
} catch (e) {
try {
xhr = new ActiveXObject("");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
return xhr;
}
2. Register the status callback function (called the callback function every time the readyState of the XMLHttpRequest object changes)
// When == 4, all steps have been completed// When == 200 means that the execution has been correct =function(){
if( == 4 && == 200){
alter("The request has been executed and it has been successful");
}
}
3. Establish an asynchronous connection with the server (default is asynchronous)
/**
open(method,url,async) method
Specifies the type of request, URL, and whether to process the request asynchronously.
method: the type of request; GET or POST
url: the URL to process the request
async: true (asynchronous) or false (synchronous)
Through time, we guarantee that new requests will be sent every time
*/
("Post", "/detailsU?time=" + new Date().getTime());
4. Make an asynchronous request
/**
Send string in json format in send method
*/
('{"Index":"'+index +'", "Change":"' + i +'"}');
Through the above four steps, you can successfully send the request
Attached source code:
{{range .PhoneDetails}}
<tr onclick="func1(this)">
<th>{{.Id}}</th>
<th>{{.Name}}</th>
<th>{{.Price}}</th>
<th>{{.Repertory}}</th>
<th>
<a href="">edit
</th>
<script type="text/javascript" src="/static/js/"></script>
<script type="text/javascript">
function func1(x) {
var code = prompt("Please enter the resized inventory size:");
if(code != null && code != "") {
var i = parseInt(code);
if(isNaN(i)) {
alert('Enter error');
} else {
var xhr = getXmlHttpRequest();
= function() {
if( == 4 && == 200) {
alter("The request has been executed and it has been successful");
}
}
var index = ;
("Post", "/detailsU?time=" + new Date().getTime());
('{"Index":"' + index + '", "Change":"' + i + '"}');
alert('Modification was successful');
}
} else {
alert('Enter error');
}
}
</script>
</tr>
{{end}}
3. Process AJAX requests in beego
1. First create the data structure in the model layer
/**
It should correspond to the passed json format string
'{"Index":"'+index +'", "Change":"' + i +'"}'
*/
type Object struct {
Index string
Change string
}
2. Register the corresponding route
/**
Register the corresponding route (note that it is set with the corresponding route)
("Post", "/detailsU?time=" + new Date().getTime());
"Post:DoUpdate" is used to register functions that are processed when the Post method requests the URL.
*/
("/detailsU", &{}, "Post:DoUpdate")
3. Write the corresponding processing function in the controller
/**
Process the corresponding request in the corresponding function
(, ob)
Through json, the data passed through is parsed and stored in the ob object
Set copyrequestbody = true in
*/
func (this *DetailController) DoUpdate(){
ob := &{}
(, ob)
db, err := ("mysql", "username:password@tcp(IP:3306)/Database name")
result, err := ("UPDATE Data table name SET Fields= ? WHERE id = ?",, )
if err != nil{
(err)
return
}else{
(result)
}
}
The above example of beego obtaining ajax data is all the content I share with you. I hope you can give you a reference and I hope you can support me more.