JSONオブジェクトをXMLHttpRequestに送信できません

Question

JSONオブジェクトをXMLHttpRequest（）に送信できません。しかし、send（）で文字列データを送信すると、それが動作します。たとえば、次のコードが動作します。

var xhr = new XMLHttpRequest(); 
var url = 'https://xyz.info/api/contacts'; 
xhr.open("POST", url,true); 
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 

xhr.onreadystatechange = function() {//Call a function when the state changes. 
    if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) { 
       // Request finished. Do processing here. 
    } 
} 
xhr.send("apikey=ee694eabf9e3&firstname=Raja1&lastname=Kumars&phone=123456"); 

ただし、JSONを使用してデータを送信しようとすると、URLに何もポストされません。次のコードは動作しません。

var xhr = new XMLHttpRequest(); 
var url = 'https://xyz.info/api/contacts'; 
    xhr.open("POST", url,true); 
    //xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xhr.setRequestHeader("Content-Type", "application/json"); 

    xhr.onreadystatechange = function() {//Call a function when the state changes. 
    if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) { 
      // Request finished. Do processing here. 
     } 
    } 
    xhr.send(JSON.stringify({ 
        'apikey' :'ee6915d4ee4b4df66bba82277e3', 
        'firstname' : 'Kumar', 
        'lastname' : 'Sunder', 
        'phone':'5557773334' 
    }));   

Answer 1

2回の通話で非常に異なる情報が送信されています。いくつかのサンプルコード：

あなたの元の文字列がコンソールログに出力されたとき、それはあなたが期待するようになります var _stringify = JSON.stringify({ 'apikey' :'ee6915d4ee4b4df66bba82277e3', 'firstname' : 'Kumar', 'lastname' : 'Sunder', 'phone':'5557773334' }); console.log(_stringify); var _orig = "apikey=ee694eabf9e3&firstname=Raja1&lastname=Kumars&phone=123456" var _encoded = encodeURI(_stringify); console.log(_orig); console.log(_encoded); ：JSON.stringifyの結果がコンソールに出力され

apikey=ee694eabf9e3&firstname=Raja1&lastname=Kumars&phone=123456 は、それが返されます。 {"apikey":"ee6915d4ee4b4df66bba82277e3","firstname":"Kumar","lastname":"Sunder","phone":"5557773334"} つまり、余分な二重引用符と左右の括弧が完全に付いています。そのすべてを文字列として送信する場合（最初の例のように）、JSON.stringify呼び出しの結果をURIエンコードする必要があります。これは、以下を含む "_encoded"変数で行われます。 %7B%22apikey%22:%22ee6915d4ee4b4df66bba82277e3%22,%22firstname%22:%22Kumar%22,%22lastname%22:%22Sunder%22,%22phone%22:%225557773334%22%7D

Answer 2

あなたはPOSTアクションで送信していますが、その後にURL文字列でデータを送信しています。そのように送信したい場合は、GETに設定する必要があります。