JQuery ajax appel à httpget webmethod (C#) ne fonctionne pas

Question

J'essaie d'obtenir un ajax arriver à une webmethod dans le code derrière. Le problème est que je continue à obtenir l'erreur "parserreur" de la méthode jQuery onfail.

Si je change le GET à un POST tout fonctionne bien. S'il vous plaît voir mon code ci-dessous.

Ajax Appel

<script type="text/javascript"> 
     var id = "li1234"; 

     function AjaxGet() { 
      $.ajax({ 
       type: "GET", 
       url: "webmethods.aspx/AjaxGet", 
       data: "{ 'id' : '" + id + "'}", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       async: false, 
       success: function(msg) { 
        alert("success"); 

       }, 
       error: function(msg, text) { 
        alert(text); 
       } 
      }); 
     } 

    </script> 

code Derrière

[System.Web.Services.WebMethod] 
[System.Web.Script.Services.ScriptMethod(UseHttpGet = true, 
    ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)] 
public static string AjaxGet(string id) 
{ 
    return id; 
} 

Web.config

 <webServices> 
      <protocols> 
       <add name="HttpGet"/> 
      </protocols> 
     </webServices> 

L'URL utilisé

......../webmethods.aspx/AjaxGet {% 20% 27id de% 27% 20:% 20% 27% 27li1234}?

Dans le cadre de la réponse, il renvoie le code HTML pour la page webmethods.

Toute aide sera grandement appréciée.

Answer 1

Avant tout ce que je pouvais dire que vous choisissez de ne pas la meilleure façon. ScriptMethods est facile à utiliser avec ASP.NET ScriptManager et pas avec jQuery. Je vous recommande de mieux utiliser les services HTTP WCF compatibles JSON (mieux que le service RESTfull) au lieu du service Web ASMX que vous essayez d'utiliser maintenant. Néanmoins, on peut vous faire du code de travail sans utiliser de technologies Microsoft côté client.

Tout d'abord, vérifiez le côté serveur.

1. Renommez webmethods.aspx en webmethods.asmx.

2. Vérifiez que vous avez placé à l'intérieur de \ et un httpHandlers pour l'extension asmx (ScriptHandlerFactory) existent également dans la configuration:

   <configuration> 
       <!-- ... --> 
       <system.web> 
       <webServices> 
        <protocols> 
        <add name="HttpGet"/> 
        </protocols> 
       </webServices> 
       <httpHandlers> 
        <!-- ... --> 
        <add verb="*" path="*.asmx" 
         type="System.Web.Script.Services.ScriptHandlerFactory" 
         validate="false"/> 
       </httpHandlers></system.web></configuration> 
   

3. Vérifiez que [ScriptService] attribut ([System.Web.Script.Services. ScriptService] si vous aimez les noms complets) défini pour votre classe héritée de System.Web.Services.WebService.

Maintenant, vous pouvez tester le service.Open Web URL vous-navigateur comme http://localhost/webmethods.asmx/AjaxGet?id=li1234 Si vous recevez de nouveau quelque chose comme
<?xml version="1.0" encoding="utf-8" ?>
<string xmlns="http://tempuri.org/">li1234</string>

Vous pouvez être sûr que vous partie de service fonctionne très bien.

Remarque: Independ sur « ResponseFormat = System.Web.Script.Services.ResponseFormat.Json » attribuer la réponse de service avec des réponses XML si « Content-Type: application/JSON, » pas fixé dans la demande.

Maintenant, nous allons corriger le code client. J'espère que les commentaires que j'ai placés dans le code suivant expliquent tout.

Encore une petite remarque. Dans la dernière partie du code que j'appelle une autre méthode Web « complexe »:

[WebMethod] 
[ScriptMethod (UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] 
public OutputData AjaxGetMore (InputData input) { 
    return new OutputData() { 
     id = input.id, 
     message = "it's work!", 
     myInt = input.myInt+1 
    }; 
} 

Où

public class OutputData { 
    public string id { get; set; } 
    public string message { get; set; } 
    public int myInt { get; set; } 
} 
public class InputData { 
    public string id { get; set; } 
    public int myInt { get; set; } 
} 

Maintenant que le code JavaScript qui utilisent dans certains endroits du plugin JSON, qui pourrait être remplacé par l'json2 de Crockford .js, si quelqu'un le préfère.

var id = "li1234"; 
// version 1 - works 
var idAsJson = '"' + id + '"'; // string serializes in JSON format 
$.ajax({ 
    type: "GET", 
    url: "/webmethods.asmx/AjaxGet?id=" + idAsJson, 
    contentType: "application/json; charset=utf-8", 
    success: function(msg) { 
     alert(msg.d); // var msg = {d: "li1234"} 
    }, 
    error: function(res, status) { 
     if (status ==="error") { 
      // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace 
      var errorMessage = $.parseJSON(res.responseText); 
      alert(errorMessage.Message); 
     } 
    } 
}); 

// version 2 with respect of JSON plugin 
$.ajax({ 
    type: "GET", 
    url: "/webmethods.asmx/AjaxGet?id=" + $.toJSON(id), 
    contentType: "application/json; charset=utf-8", 
    success: function(msg) { 
     alert(msg.d); // var msg = {d: "li1234"} 
    }, 
    error: function(res, status) { 
     if (status ==="error") { 
      // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace 
      var errorMessage = $.parseJSON(res.responseText); 
      alert(errorMessage.Message); 
     } 
    } 
}); 
// version 3 where jQuery will construct URL for us 
$.ajax({ 
    type: "GET", 
    url: "/webmethods.asmx/AjaxGet", 
    data: {id: $.toJSON(id)}, 
    dataType: "json", 
    contentType: "application/json; charset=utf-8", 
    success: function(msg) { 
     alert(msg.d); // var msg = {d: "li1234"} 
    }, 
    error: function(res, status) { 
     if (status ==="error") { 
      // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace 
      var errorMessage = $.parseJSON(res.responseText); 
      alert(errorMessage.Message); 
     } 
    } 
}); 
// version 4. We set "Content-Type: application/json" about our data, but we use no 
//   not 'dataType: "json"' parameter. Then we have "Accept: */*" in the request 
//   instead of "Accept: application/json, text/javascript, */*" before. 
//   Everithing work OK like before. 
$.ajax({ 
    type: "GET", 
    url: "/webmethods.asmx/AjaxGet", 
    data: {id: $.toJSON(id)}, 
    contentType: "application/json; charset=utf-8", 
    success: function(msg) { 
     alert(msg.d); // var msg = {d: "li1234"} 
    }, 
    error: function(res, status) { 
     if (status ==="error") { 
      // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace 
      var errorMessage = $.parseJSON(res.responseText); 
      alert(errorMessage.Message); 
     } 
    } 
}); 
// version 5. If we don't place "Content-Type: application/json" in our reqest we 
//   receive back XML (!!!) response with "HTTP/1.1 200 OK" header and 
//   "Content-Type: text/xml; charset=utf-8" which will be placed. 
//   How one can read in 
// http://weblogs.asp.net/scottgu/archive/2007/04/04/json-hijacking-and-how-asp-net-ajax-1-0-mitigates-these-attacks.aspx), 
//    ASP.NET AJAX will not make JSON serialized of response data for 
//    security reasons. 
$.ajax({ 
    type: "GET", 
    url: "/webmethods.asmx/AjaxGet", 
    data: {id: $.toJSON(id)}, 
    dataType: "json", 
    //contentType: "application/json; charset=utf-8", 
    success: function(msg) { 
     alert(msg.d); // var msg = {d: "li1234"} 
    }, 
    error: function (res, status, ex) { 
     // the code here will be works because of error in parsing server response 
     if (res.status !== 200) { // if not OK 
      // we receive exception in the next line, be 
      var errorMessage = $.parseJSON(res.responseText); 
      alert(errorMessage.Message); 
     } else { 
      alert("status=" + status + "\nex=" + ex + "\nres.status=" + res.status + "\nres.statusText=" + res.statusText + 
        "\nres.responseText=" + res.responseText); 
     } 
    } 
}); 
// version 6. Send more komplex data to/from the service 
var myData = { id: "li1234", myInt: 100} 
$.ajax({ 
    type: "GET", 
    url: "/webmethods.asmx/AjaxGetMore", 
    data: {input:$.toJSON(myData)}, 
    dataType: "json", 
    contentType: "application/json; charset=utf-8", 
    success: function(msg) { 
     // var msg = {__type: "Testportal.OutputData", id: "li1234", message: "it's work!", myInt:101} 
     alert("message=" + msg.d.message + ", id=" + msg.d.id + ", myInt=" + msg.d.myInt); 
    }, 
    error: function(res, status) { 
     if (status ==="error") { 
      // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace 
      var errorMessage = $.parseJSON(res.responseText); 
      alert(errorMessage.Message); 
     } 
    } 
}); 

Answer 2

//... 
data: { "id" : id }, 
//... 

Les données sont un objet, pas une chaîne qui ressemble à un objet.

Si vous utilisez une chaîne, il doit être une chaîne de requête d'URL correctement formaté, comme ceci:

//... 
data: "id=" + encodeURIComponent(id) + "&otherstuff=" + encodeURIComponent(data), 
//... 

Answer 3

Vous pouvez également consulter http://www.json.org/js.html JSON.stringify où il accepte un objet JSON comme paramètre et renvoie une chaîne.

Answer 4

Je suis venu ici à la recherche de la réponse ... Pour les autres, voici la réponse.

Pour des raisons de sécurité, les méthodes de page ASP.Net AJAX ne prennent en charge que les requêtes POST.

(De https://stackoverflow.com/a/2397521)

Answer 5

Pour ceux qui utilisent VB, décorer votre méthode comme ceci:

<WebMethod()> 
<ScriptMethod(UseHttpGet:= True, ResponseFormat:= ResponseFormat.Json)>