javascript - 如何从 javascript 客户端将参数传递到 WCF Rest 服务的方法？

Question

我正在运行一个 wcf 服务，其中包含一个返回字符串的方法。我能够在浏览器中成功运行该服务。而且我什至可以传递所需的参数并可以在浏览器中看到结果。

但是当我尝试从 javascript 客户端调用相同的方法时，参数值不会传递给该方法，因此它不会返回任何内容。

这是我的服务从浏览器运行时重新调整的内容

这是我的界面实现:

 [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 代码传递参数。任何使这项工作正常进行的建议将不胜感激。

Answer 1

value 需要是一个键值对:

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>