beegoでajaxデータを取得する例

1.AJAXとは何ですか

Asynchronous JavaScript And XML（非同期JavaScriptおよびXML）は、インタラクティブなウェブアプリケーションを作成するためのウェブ開発技術です

AJAXは、全体のウェブページを再読み込みしないで、一部のウェブページを更新できる技術です。

2.AJAXの使用方法

XMLHttpRequestはAJAXの基本です。

XMLHttpRequestは、バックグラウンドでサーバーとデータの交換を行うために使用されます。これは、全体のウェブページを再読み込みしないで、ウェブページの一部を更新できることを意味します。

AJAXを使用する際には大まかに4つのステップがあります

1.XMLHttpRequestオブジェクトを生成します

//jsコードでXMLHttpRequestオブジェクトを取得します（util.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){
    alert("请求已全部执行，并且成功");
  }
}

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) {
                  alert("请求已全部执行，并且成功");
                }
              }
              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"を使用して、PostメソッドでこのURLを処理する関数を登録します
*/
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（メール送信時は、#を@に変更してください）で報告し、関連する証拠を提供してください。一旦確認がとりついたら、このサイトは即座に侵害を疑われるコンテンツを削除します。

基本教程