JQuery ajax调用httpget webmethod(c#)无法正常工作

时间:2010-04-16 06:38:28

标签: c# jquery get

我正试图让ajax在代码背后获得一个webmethod。问题是我不断从jQuery onfail方法获得错误“parserror”。

如果我将GET更改为POST,一切正常。请参阅下面的代码。

Ajax Call

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

代码背后

[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>

正在使用的网址

  

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

作为响应的一部分,它返回页面webmethods的html。

非常感谢任何帮助。

5 个答案:

答案 0 :(得分:23)

在我可以说之前,你选择的不是最简单的方法。 ScriptMethods易于与ASP.NET ScriptManager一起使用,而不是与jQuery一起使用。我建议您最好使用支持JSON的WCF HTTP服务(更好的是作为RESTfull服务)而不是您现在尝试使用的ASMX Web服务。 然而,人们可以在不使用客户端的任何Microsoft技术的情况下使代码工作。

首先验证服务器端。

  1. 将webmethods.aspx重命名为webmethods.asmx。
  2. 验证您是否放置了Inside of \并且配置中也存在asmx扩展名(ScriptHandlerFactory)的httpHandlers:

    <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. 验证为您继承自System.Web.Services.WebService的类设置的[ScriptService]属性([System.Web.Script.Services.ScriptService],如果您喜欢全名)。

  4. 现在您可以测试该服务。在您的网络浏览器网址中打开,例如http://localhost/webmethods.asmx/AjaxGet?id=li1234 如果你收到类似的东西 <?xml version="1.0" encoding="utf-8" ?>
    <string xmlns="http://tempuri.org/">li1234</string>

    您可以确定您的维修部件工作正常。

    备注:如果“Content-Type:application / json;”未设置,则将“ResponseFormat = System.Web.Script.Services.ResponseFormat.Json”属性与“XML响应”属性相关联请求。

    现在我们将修复客户端代码。我希望我在下面的代码中提出的评论解释了所有。

    还有一个小小的评论。在代码的最后一部分,我称之为“复杂”的Web方法:

    [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
        };
    }
    

    哪里

    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; }
    }
    

    现在只有JavaScript代码在某些地方使用JSON插件,如果有人喜欢的话,可以用Crockford的json2.js代替。

    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);
            }
        }
    });
    

答案 1 :(得分:4)

我来到这里寻找答案......对于其他人来说,这就是答案。

  

出于安全原因,ASP.Net AJAX页面方法仅支持POST请求。

(来自https://stackoverflow.com/a/2397521

答案 2 :(得分:2)

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

数据是一个对象,而不是一个看起来像对象的字符串。

如果使用字符串,则必须是格式正确的URL查询字符串,如下所示:

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

答案 3 :(得分:1)

您还可以查看http://www.json.org/js.html JSON.stringify,它接受一个json对象作为参数并返回一个字符串。

答案 4 :(得分:0)

对于那些使用VB的人来说,装饰你的方法:

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