Question

我开发了一个成功运行的服务。以下是我的服务代码：

namespace WcfService1
{   
[ServiceContract]
public interface IService1
{
    [OperationContract]
    [WebInvoke(Method="GET", ResponseFormat = WebMessageFormat.Json, BodyStyle=WebMessageBodyStyle.Wrapped, UriTemplate="/display/{a}/{b}")]        
    string Display(string a, string b);        
} 
}

我的服务：

namespace WcfService1
{
 public class Service1 : IService1
{
    public string Display(string a, string b)
    {
        int ab = Convert.ToInt32(a);
        int bc = Convert.ToInt32(b);
        int cb = ab + bc;
        return cb.ToString();
    }
}
}

如何在AJAX URL的帮助下调用它？我已经尝试了以下代码，但它无法正常工作。

<script type="text/javascript">
    $(document).ready(function () {
        $('#BtnRegister').click(function () {
            debugger;

            var No1 = document.getElementById('TxtFirstNumber').value;
            var No2 = document.getElementById('TxtSecondNumber').value;

            $.ajax({
                cache: false,
                type: "GET",
                async: false,
                url: "http://localhost:22727/Service1.svc/Display",
                data: 'a=' +No1+'&b='+No2,
                contentType: "application/json; charset=ytf-8",
                dataType: "json",
                processData: true,
                success: function (result) {
                    alert("data");
                },
                error: function (xhr, textStatus, errorThrown) { alert(textStatus + ':' + errorThrown); }
            });
        });
    });
</script>

更新：

我将代码更改为以下代码：

$(document).ready(function () {
        $('#BtnRegister').click(function () {
            debugger;

            var No1 = document.getElementById('TxtFirstNumber').value;
            var No2 = document.getElementById('TxtSecondNumber').value;

            $.ajax({
                cache: false,
                type: "GET",
                url: "http://localhost:22727/Service1.svc/Display",
                data: { a: No1, b: No2 },
                contentType: "application/json; charset=ytf-8",
                //processData: true, //<-- this isn't needed because it defaults to true anyway
                success: function (result) {
                    alert("data");
                },
                error: function (xhr, textStatus, errorThrown) { alert(textStatus + ':' + errorThrown); }
            });
        });
    });

但是当我点击按钮时：

enter image description here

Answer 1

根据服务定义，它期望JSON作为请求格式，但您传递的是表单编码的键/值对。因此，请将数据部分更改为：

data: {a : No1, b : No2},

这将传递一个对象，因为你将内容类型设置为JSON，jQuery会自动将对象转换为JSON以获取请求。

此外，您的服务返回一个字符串，而不是JSON，因此您需要删除dataType: "json",，因为如果您将其保留，jQuery将尝试将响应解析为JSON，它将触发错误处理程序而不是成功。

我建议删除async: false因为ajax最好异步使用，在这种情况下同步请求没有任何好处。

上述变更后的完整请求：

$.ajax({
    cache: false,
    type: "GET",
    url: "http://localhost:22727/Service1.svc/Display",
    data: {a : No1, b : No2},
    contentType: "application/json; charset=ytf-8",
    //processData: true, //<-- this isn't needed because it defaults to true anyway
    success: function (result) {
        alert("data");
    },
    error: function (xhr, textStatus, errorThrown) { alert(textStatus + ':' + errorThrown); }
});

编辑问题后更新：

您的服务位于与您的JavaScript来源不同的端口上，因此请求因同源策略而失败。

要解决此问题，您需要从服务输出CORS标头：

Access-Control-Allow-Origin: *

这将允许任何来源调用该服务，您可能希望将其限制为某些来源。

Answer 2

试试这个：

$.ajax({
   type:'GET',
   url:'your url',
   data:{ var1: value1, var2: value2},
   success:function(response)
{

}

});

并在业务层上，使用变量名称检索这些，即。 var1和var2。

Answer 3

试试这个，

var params = {a：No1，b：No2}

 <script type="text/javascript">
$(document).ready(function () {
    $('#BtnRegister').click(function () {
        debugger;

        var No1 = document.getElementById('TxtFirstNumber').value;
        var No2 = document.getElementById('TxtSecondNumber').value;

           var params = {a: No1, b:No2}

        $.ajax({
            cache: false,
            type: "GET",
            async: false,
            url: "http://localhost:22727/Service1.svc/Display",
            data: params,
            contentType: "application/json; charset=ytf-8",
            dataType: "json",
            processData: true,
            success: function (result) {
                alert("data");
            },
            error: function (xhr, textStatus, errorThrown) { alert(textStatus + ':' + errorThrown); }
        });
    });
});

Answer 4

我认为数据应该是这样的对象并删除async = false：

$.ajax({
                cache: false,
                type: "GET",
                url: "http://localhost:22727/Service1.svc/Display",
                data: {
                     a: No1,
                     b: No2
                },
                contentType: "application/json; charset=ytf-8",
                dataType: "json",
                processData: true,
                success: function (result) {
                    alert("data");
                },
                error: function (xhr, textStatus, errorThrown) { alert(textStatus + ':' + errorThrown); }
            });

如何在AJAX URL中传递参数？

4 个答案: