beego gets an instance of ajax data

1. What is AJAX

Asynchronous JavaScript And XML (asynchronous JavaScript and XML) refers to a kind of web development technology to create interactive web applications

Ajax is a technology that can update parts of a web page without reloading the entire 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 parts of the page can be updated without reloading the entire page.

Use AJAX in four steps

1. Create the XMLHttpRequest object

//js The code for XMLHttpRequest  Object (save as 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(" Your browser does not support it AJAX ! ");
        return false;
      }
    }
  }
  return xhr;
}

2. Register the status callback function (called every time the XMLHttpRequest object's readyState changes)

// when xhr.readyState == 4 All the steps have been completed 
// when xhr.state == 200 "Indicates that it has been executed correctly 
 xhr.onreadystatechange=function(){
  if(xhr.readyState == 4 && xhr.state == 200){
    alter(" All requests were executed and successful ");
  }
}

3. Establish an asynchronous connection with the server (default is asynchronous)

/**
 open(method,url,async) methods 
  Specify the type of request, URL  And whether the request is processed asynchronously. 
 method : Type of request; GET  or  POST
 url : To process a request url
 async : true (asynchronous) or  false (synchronous) 
  through time To ensure that every time a new request is sent 
*/
xhr.open("Post", "/detailsU?time=" + new Date().getTime());

4. Make asynchronous requests

/**
 send Send in method json Formatted string 
*/
xhr.send('{"Index":"'+index +'", "Change":"' + i +'"}');

The above 4 steps will enable the successful sending of the request

Attached to the source code:

{{range .PhoneDetails}}  
    <tr onclick="func1(this)">
      <th>{{.Id}}</th>
      <th>{{.Name}}</th>
      <th>{{.Price}}</th>
      <th>{{.Repertory}}</th>
      <th>
        <a href=""> The editor 
      </th>
      <script type="text/javascript" src="/static/js/util.js"></script>
      <script type="text/javascript">
        function func1(x) {
          var code = prompt(" Please enter the adjusted inventory size: ");
          if(code != null && code != "") {
            var i = parseInt(code);
            if(isNaN(i)) {
              alert(' Input error ');
            } else {
              var xhr = getXmlHttpRequest();
              xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.state == 200) {
                  alter(" All requests were executed and successful ");
                }
              }
              var index = x.rowIndex;
              xhr.open("Post", "/detailsU?time=" + new Date().getTime());
              xhr.send('{"Index":"' + index + '", "Change":"' + i + '"}');
              alert(' Modify the success ');
            }
          } else {
            alert(' Input error ');
          }
        }
      </script>
    </tr>
    {{end}}

3. Process AJAX requests in beego

1. First, the data structure is created in ES53en.go of models layer

/**
  To be communicated with json Format string correspondence 
 '{"Index":"'+index +'", "Change":"' + i +'"}'
*/
type Object struct {
 Index string
 Change string
}

2. Register the route

/**
  in main.go Register the corresponding route (note that the corresponding route is set up) 
 xhr.open("Post", "/detailsU?time=" + new Date().getTime());
 "Post:DoUpdate" Used to register when Post Method requests the URL Function of processing 
*/
beego.Router("/detailsU", &controllers.DetailController{}, "Post:DoUpdate")

3. Write the corresponding processing function in controller

/**
  Process the corresponding request in the corresponding function 
 json.Unmarshal(this.Ctx.Input.RequestBody, ob)
  through json To parse through the incoming data and store the data in ob In the object 
  in app.conf Set in the copyrequestbody = true
*/
func (this *DetailController) DoUpdate(){
    ob := &models.Object{}
    json.Unmarshal(this.Ctx.Input.RequestBody, ob)
    db, err := sql.Open("mysql", " The user name : password @tcp(IP:3306)/ The database name ")
    result, err := db.Exec("UPDATE  The data table name  SET  field = ? WHERE id = ?",ob.Change, ob.Index)
    if err != nil{
      beego.Error(err)
      return
    }else{
       fmt.Println(result)
    }
}