web-dev-qa-db-ja.com

JSONデータをAjaxを介してRESTful Webサービスに渡す方法とJSONデータを取得する方法

こんにちは、私はJSONを初めて使用します。私の質問は、JSONデータをAjaxを介してRESTful Webサービスに渡す方法です。

私を助けてください。

コードを試してみましたが、よくわかりません

マイインデックスページ

<script type="text/javascript">

 $(document).ready(function(){  

     var uname = document.getElementById("uname").value();
     var password = document.getElementById("pwd").value();


     $('#ok').click(function(){  
         $.ajax({  
             url:'http://localhost:8090/LoginAuthRWS/rest/orders',  
             type:'post',  
             dataType: 'Jsondemo',


             success: function(data) {  
                 $('#name').val(data.name);  
                 $('#email').val(data.email);  

                 var JSONObject= {
                         "uname":uname,
                         "password":password
                         };
             }  
         });  
     });  
}); 

</script>
jqueryajaxjsonrest
7
Jagathesewaren Kuppuraj
var JSONObject= {"uname":uname, "password":password };
var jsonData = JSON.parse( JSONObject );    

var request = $.ajax({
  url: "rest/orders",
  type: "POST",
  data: jsonData,
  dataType: "json"
});
9
Arvind

コードの問題：

  • .valueは関数ではなくプロパティです
  • Json use data of $.ajaxを渡したい
  • Jsondemoのようなデータ型はありませんJSONを使用する必要があります
  • 応答dataがJSONでない場合、$.parseJSONを使用してJSONに変換できます

完全なコード

$(document).ready(function(){  
    $('#ok').click(function(){  
        var uname = document.getElementById("uname").value;
        var password = document.getElementById("pwd").value;
        var JSONObject= {
             "uname":uname,
             "password":password
             };

        $.ajax({  
            url:'http://localhost:8090/LoginAuthRWS/rest/orders',  
            type:'post',
            data :  JSONObject,      
            dataType: 'JSON',
            success: function(data) { 
                     var jsonData = $.parseJSON(data); //if data is not json
                     $('#name').val(jsonData.name);  
                     $('#email').val(jsonData.email);  
                }  
        });  
    });  
});
4
Satpal

あなたはこのようなことをしたいです：

$('#ok').click(function(){  
         $.ajax({  
             url:'http://localhost:8090/LoginAuthRWS/rest/orders',  
             type:'post',  
             dataType: 'json',
             data: { name: "John", location: "Boston" }

             success: function(data) {  
                 response = $.parseJSON(data);
                 $('#name').val(response.name);  
                 $('#email').val(response.email);      
             }  
         });  
});

注意すべきいくつかの点：

  • dataTypeは、ほとんど常にxmlまたはjsonでなければなりません。何も指定しないと、JQueryが正しく推測できる場合があります。しかし、それは本物である必要があります。
  • 投稿をしているので、RESTエンドポイントにデータを送信する必要があります。これがdataにあるものです。データの種類がdataTypeの値と一致することに注意してください。また、 $.postメソッドを使用して、JQueryではるかに簡単な投稿を行うことができます。
  • here のようにdata型であるため、成功コールバックへのPlainObjectパラメーターは、最初にJSONとして解析する必要があります（これが返されるものと想定）。それが$.parseJSONします。これを実行したら、必要に応じてJSONツリーをナビゲートして必要な操作を実行できます。あなたはそれをしなくても逃げることができるかもしれません。

お役に立てば幸いです。

1
Vidya

jQuery dataTypeリファレンス 。

可能なdataType値：xml、json、script、またはhtml

これを試してください：

var dataToServer = { 
  uname : document.getElementById("uname").value,
  document.getElementById("pwd").value
};

$.ajax({  
  url:'http://localhost:8090/LoginAuthRWS/rest/orders',  
  type:'post',  // or put
  contentType: 'application/json', // type of data
  data: JSON.stringify(dataToServer) // make JSON string
  dataType: 'json', // type of return result
  success: function(data) {  
    $('#name').val(data.name);  
    $('#email').val(data.email);  
  }  
});
1
Sergey

値をWebサービスに渡すには、Ajaxにdata属性があります。

<script type="text/javascript">

$(document).ready(function(){  

 var uname = document.getElementById("uname").value;
 var password = document.getElementById("pwd").value;


 $('#ok').click(function(){  
     $.ajax({  
         url:'http://localhost:8090/LoginAuthRWS/rest/orders',  
         type:'post',  
         dataType: 'Json',

         data:{
           uname:uname,
           password:password
         },

         success: function(data) {  
             $('#name').val(data.name);  
             $('#email').val(data.email);
         }  
     });  
  });  
}); 

</script>
1
Anto Robinson

次のように、jsonデータをリクエスト本文として渡すことができます。

    var JSONObject= {"uname":uname, "password":password };
    $.ajax({
        url : env + 'rest/orders',
        type : 'POST',
        headers: {
            'Content-Type':'application/json'
        },
        data : JSON.stringify(JSONObject),
        dataType   : "json",
    });
0
Devram Kandhare