如何从 javascript 客户端向 WCF Rest 服务的方法传递参数?

How to pass parameters to a WCF Rest service's method from javascript client?

我有一个 wcf 服务 运行ing,它包含一个 returns 字符串的方法。我能够在浏览器中成功 运行 服务。而且我什至可以传递所需的参数并在浏览器中看到结果。

但是当我试图从 javascript 客户端调用相同的方法时,参数值没有传递给该方法,因此它 returns 什么也没有。

这是当 运行 来自浏览器时我的服务返回的内容

这是我的接口实现:

 [OperationContract]

            [WebInvoke(Method = "GET",
            ResponseFormat = WebMessageFormat.Json,
            BodyStyle = WebMessageBodyStyle.Wrapped)]
            string JSONData(string id);

下面是我的服务方法实现代码:

public string JSONData(string id)
    {
        if (id == null || id == "")
        {
            return "Id is null";
        }
        else
        {
            return "You requested product " + id;
        }
    }

如上所示,服务运行良好,从 url 传递了一个参数。但是,当我使用 jquery 的函数参数进行调用时,未通过 这是我的 javascript 客户代码:

<script type="text/javascript">
        // A $( document ).ready() block.
        $(document).ready(function () {
            // alert("pass");
            var valu = "123";
            $("#btnclick").click(function () {
                debugger;
                $.ajax({
                    cache: false,
                    type: "GET",
                    async: false,
                    url: "http://localhost:35798/RestServiceImpl.svc/JSONData",
                    data: JSON.stringify(valu),
                    contentType: "application/json",
                    dataType: "json",
                    success: function (result) {
                        var ans = JSON.stringify(result);
                        alert("success");
                        alert(ans);
                    },
                    error: function (xhr) {
                        alert("error");
                        alert(xhr.responseText);
                    }
                });
            });
        });

    </script>

我希望能够从 jquery 代码传递参数。任何使这项工作有效的建议都将不胜感激。

valu 需要是键值对:

var valu = {id:"123"};

或者一个字符串:

var value = 'id="123"';

为了当前形成正确的请求。

在第一种情况下将其作为普通 JavaScript 对象传递,不要将其字符串化。如果你这样做 jquery 会将其作为字符串附加到请求中。

使用浏览器中的网络调试工具解决此类问题。

这将正确地将您的查询字符串序列化为 /JSONData?id=123,而不是您的解决方案生成 /JSONData/"123"

您的代码经过编辑...

<script type="text/javascript">
    // A $( document ).ready() block.
    $(document).ready(function () {
        // alert("pass");
        var valu = {id: "123"};
        $("#btnclick").click(function () {
            debugger;
            $.ajax({
                cache: false,
                type: "GET",
                async: false,
                url: "http://localhost:35798/RestServiceImpl.svc/JSONData",
                data: valu,
                contentType: "application/json",
                dataType: "json",
                success: function (result) {
                    var ans = JSON.stringify(result);
                    alert("success");
                    alert(ans);
                },
                error: function (xhr) {
                    alert("error");
                    alert(xhr.responseText);
                }
            });
        });
    });

</script>