web-dev-qa-db-ja.com

jQueryのgetJSON（）メソッドでリクエストヘッダーを渡すにはどうすればよいですか？

getJSON()リクエストを行う必要がありますが、認証とカスタムヘッダーを渡すにはどうすればよいですか？

要求ヘッダーが名前を取得しているが、値を取得していないという問題が発生しています。 URLは、GET/Urlの代わりにオプションとして挿入されるように、フィドラーの手動要求を通じて表示されています。

以下は、フィドラーで正常に機能するために私たちがやろうとしていることの例です。 AJAX関数でこれをどのように複製できますか？

_GET /Service.svc/logins/gdd53535342/houses/vxcbdfsdg/people/dsgsdggd?format=json HTTP/1.1
User-Agent: Fiddler
Authorization: Basic rgbg423535fa23y4436
X-PartnerKey: df3fgeg-g5g6-b55b-f3d2-dsgg353523
Host: 154.34.53.54:2757
_

JavaScriptコード：

_xhr = new XMLHttpRequest();

$(document).ready(function() {
  $.ajax({
    url: 'http://localhost:437/service.svc/logins/jeffrey/house/fas6347/devices?format=json',
    type: 'GET',
    datatype: 'json',
    success: function() { alert("Success"); },
    error: function() { alert('Failed!'); },
    beforeSend: setHeader       
  });   
});

function setHeader(xhr) {
  xhr.setRequestHeader('Authorization', 'Basic faskd52352rwfsdfs');
  xhr.setRequestHeader('X-PartnerKey', '3252352-sdgds-sdgd-dsgs-sgs332fs3f');
}
_

Fiddlerの通常のリクエストヘッダー：

_GET /service.svc/logins/jeffrey/house/fas6347/devices?format=json HTTP/1.1
User-Agent: Fiddler
Authorization: Basic faskd52352rwfsdfs
X-PartnerKey: 3252352-sdgds-sdgd-dsgs-sgs332fs3f
Host: localhost:437
_

Ajax()リクエストヘッダーによるフィドラー：

_OPTIONS service.svc/logins/jeffrey/house/fas6347/devices?format=json HTTP/1.1
Host: localhost:437
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Proxy-Connection: keep-alive
Origin: http://ipv4.fiddler:61975
Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization,x-partnerkey
_
jquerygetjson
72
Berty

要求ヘッダーを渡すには、$。ajax関数を使用する必要があるというsunetosに同意します。そのためには、before.endイベントハンドラー用の関数を作成する必要があります。これは、$。ajax（）オプションの1つです。これを行う方法の簡単なサンプルを次に示します。

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $.ajax({
          url: 'service.svc/Request',
          type: 'GET',
          dataType: 'json',
          success: function() { alert('hello!'); },
          error: function() { alert('boo!'); },
          beforeSend: setHeader
        });
      });

      function setHeader(xhr) {
        xhr.setRequestHeader('securityCode', 'Foo');
        xhr.setRequestHeader('passkey', 'Bar');
      }
    </script>
  </head>
  <body>
    <h1>Some Text</h1>
  </body>
</html>

上記のコードを実行し、Fiddlerなどのツールでトラフィックを監視すると、2つのリクエストヘッダーが渡されていることがわかります。

  • 値がFooのsecurityCode
  • 値がBarのパスキー

SetHeader関数は、$。ajaxオプションでもインラインにすることができますが、呼び出したいと思いました。

お役に立てれば！

80
David Hoerster

ヘッダーを設定しても、getJSON（）を次のように使用できると思います。

$.ajaxSetup({
  headers : {
    'Authorization' : 'Basic faskd52352rwfsdfs',
    'X-PartnerKey' : '3252352-sdgds-sdgd-dsgs-sgs332fs3f'
  }
});
$.getJSON('http://localhost:437/service.svc/logins/jeffrey/house/fas6347/devices?format=json', function(json) { alert("Success"); });
34
Sean N.

$.getJSON()メソッドは、そのような高度なオプションを指定できない短縮形です。それを行うには、完全な$.ajax()メソッドを使用する必要があります。

http://api.jquery.com/jQuery.getJSON/ のドキュメントに注意してください。

これは、以下と同等の略式Ajax関数です。

_$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});
_

したがって、$.ajax()を使用して、必要な追加パラメーターをすべて指定してください。

15
sunetos