web-dev-qa-db-fra.com

comment transmettre des données JSON à des services Web reposants via ajax et comment obtenir des données JSON?

Bonjour, je suis nouveau sur JSON. Ma question est de savoir comment transmettre des données JSON à des services Web reposants via ajax?

Aidez-moi, s'il vous plaît.

J'ai essayé en suivant le code mais je n'en suis pas sûr

MA PAGE D'INDEX 

<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

Problèmes avec votre code:

  • .value est une propriété et non une fonction
  • Vous voulez passer json, utilisez data de $.ajax
  • Il n'y a pas de type de données en tant que Jsondemo vous devez utiliser JSON
  • si la réponse data n'est pas JSON, vous pouvez utiliser $.parseJSON pour la convertir en JSON.

Code complet

$(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

Vous voulez faire quelque chose comme ça:

$('#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);      
             }  
         });  
});

Quelques points à noter:

  • dataType devrait être presque toujours xml ou json. Parfois, JQuery peut deviner correctement si vous ne fournissez rien. Mais cela doit être une chose réelle.
  • Comme vous publiez un article, vous devez envoyer des données au noeud final REST. C'est ce que j'ai dans data. Notez que le type de données correspond à la valeur dans dataType. Notez également que vous pouvez utiliser la méthode $.post pour créer une publication beaucoup plus simple avec JQuery.
  • Le paramètre data du rappel de succès doit d'abord être analysé en tant que JSON (en supposant que ce soit ce qui revient), car il est de type PlainObject comme décrit here . C'est ce que $.parseJSON fait. Une fois que vous avez fait cela, vous pouvez naviguer dans l’arbre JSON autant que nécessaire pour faire ce que vous devez faire. Vous pourrez peut-être vous en sortir sans le faire cependant.

J'espère que cela pourra aider.

1
Vidya

jQuery dataType Reference . 

Valeurs possibles dataType: xml, json, script ou html

Essayez ceci: 

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

Pour transmettre les valeurs aux services Web, Ajax a data attribut.

<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

Vous pouvez transmettre les données JSON en tant que corps de requête comme ceci:

    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