技术问答ajax濡備綍鑾峰彇json鏁版嵁 - 扬州沐宇科技

浣跨敤Ajax鑾峰彇JSON鏁版嵁鐨勬楠ゅ涓嬶細

鍒涘缓涓€涓猉MLHttpRequest瀵硅薄锛氬彲浠ヤ娇鐢ㄥ師鐢熺殑JavaScript鏉ュ垱寤篨MLHttpRequest瀵硅薄锛屼篃鍙互浣跨敤jQuery搴撲腑鐨?code>$.ajax()鏂规硶鏉ュ垱寤恒€?/p>
璁剧疆璇锋眰鐨刄RL鍜岃姹傛柟娉曪細浣跨敤XMLHttpRequest瀵硅薄鐨?code>open()鏂规硶鏉ヨ缃姹傜殑URL鍜岃姹傛柟娉曘€備緥濡傦紝濡傛灉瑕佸彂閫丟ET璇锋眰锛屽彲浠ュ皢璇锋眰鏂规硶璁剧疆涓?quot;GET"锛岀劧鍚庡皢URL浣滀负鍙傛暟浼犻€掔粰open()鏂规硶銆?/p>
璁剧疆璇锋眰澶达紙鍙€夛級锛氬鏋滈渶瑕佽缃姹傚ご锛屽彲浠ヤ娇鐢╔MLHttpRequest瀵硅薄鐨?code>setRequestHeader()鏂规硶鏉ヨ缃€備緥濡傦紝濡傛灉瑕佸彂閫丣SON鏁版嵁浣滀负璇锋眰浣擄紝鍙互璁剧疆Content-Type璇锋眰澶翠负"application/json"銆?/p>
璁剧疆鍝嶅簲鐨勬暟鎹被鍨嬶細浣跨敤XMLHttpRequest瀵硅薄鐨?code>responseType灞炴€ф潵璁剧疆鍝嶅簲鐨勬暟鎹被鍨嬩负"json"锛屼互鍛婅瘔娴忚鍣ㄥ皢鍝嶅簲鏁版嵁瑙ｆ瀽涓篔SON鏍煎紡銆?/p>
娉ㄥ唽璇锋眰瀹屾垚鐨勫洖璋冨嚱鏁帮細浣跨敤XMLHttpRequest瀵硅薄鐨?code>onreadystatechange灞炴€ф潵娉ㄥ唽涓€涓洖璋冨嚱鏁帮紝鍦ㄨ姹傚畬鎴愬悗瑙﹀彂銆?/p>
鍙戦€佽姹傦細浣跨敤XMLHttpRequest瀵硅薄鐨?code>send()鏂规硶鏉ュ彂閫佽姹傘€傚鏋滃彂閫丟ET璇锋眰锛屽彲浠ュ皢璇锋眰浣撹缃负null锛涘鏋滃彂閫丳OST璇锋眰锛屽彲浠ュ皢JSON鏁版嵁搴忓垪鍖栦负瀛楃涓诧紝骞跺皢鍏朵綔涓鸿姹備綋鍙戦€併€?/p>
鍦ㄥ洖璋冨嚱鏁颁腑澶勭悊鍝嶅簲鏁版嵁锛氬湪璇锋眰瀹屾垚鍚庯紝閫氳繃XMLHttpRequest瀵硅薄鐨?code>status灞炴€ф潵鍒ゆ柇璇锋眰鏄惁鎴愬姛锛?00琛ㄧず鎴愬姛锛夛紝鐒跺悗鍙互閫氳繃XMLHttpRequest瀵硅薄鐨?code>response灞炴€ф潵鑾峰彇鍝嶅簲鏁版嵁銆?/p>

浠ヤ笅鏄竴涓娇鐢ㄥ師鐢烰avaScript鐨勭ず渚嬶細

var xhr = new XMLHttpRequest();
xhr.open("GET", "example.json", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.responseType = "json";
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    var jsonData = xhr.response;
    // 澶勭悊鍝嶅簲鏁版嵁
  }
};
xhr.send();

浣跨敤jQuery鐨勭ず渚嬶細

$.ajax({
  url: "example.json",
  method: "GET",
  dataType: "json",
  success: function(data) {
    // 澶勭悊鍝嶅簲鏁版嵁
  }
});