Javascript 如何在AJAX URL中传递参数？_Javascript_Jquery_Ajax_Wcf_Xmlhttprequest

Javascript 如何在AJAX URL中传递参数？

javascript jquery ajax wcf

Javascript 如何在AJAX URL中传递参数？,javascript,jquery,ajax,wcf,xmlhttprequest,Javascript,Jquery,Ajax,Wcf,Xmlhttprequest,我开发了一个正在成功运行的服务。以下是我的服务代码： namespace WcfService1 { [ServiceContract] public interface IService1 { [OperationContract] [WebInvoke(Method="GET", ResponseFormat = WebMessageFormat.Json, BodyStyle=WebMessageBodyStyle.Wrapped, UriTemplate="/dis

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

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>


$（文档）.ready（函数（）{
$（'#BtnRegister'）。单击（函数（）{
调试器；
var No1=document.getElementById（'TxtFirstNumber'）。值；
var No2=document.getElementById（'TxtSecondNumber'）。值；
$.ajax({
cache:false，
键入：“获取”，
async:false，
url:“http://localhost:22727/Service1.svc/Display",
数据：“a=”+No1+”&b=”+No2，
contentType:“application/json；charset=ytf-8”，
数据类型：“json”，
processData：对，
成功：功能（结果）{
警报（“数据”）；
},
错误：函数（xhr，textStatus，errorhorn）{alert（textStatus+'：'+errorhorn）；}
});
});
});

更新：

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

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

$（文档）.ready（函数（）{
$（'#BtnRegister'）。单击（函数（）{
调试器；
var No1=document.getElementById（'TxtFirstNumber'）。值；
var No2=document.getElementById（'TxtSecondNumber'）。值；
$.ajax({
cache:false，
键入：“获取”，
url:“http://localhost:22727/Service1.svc/Display",
数据：{a:No1，b:No2}，
contentType:“application/json；charset=ytf-8”，
//processData:true，//根据服务定义，它期望JSON作为请求格式，但您正在传递一个表单编码的键/值对。因此将数据部分更改为：
data: {a : No1, b : No2},

这将传递一个对象，因为您将内容类型设置为JSON，jQuery将自动将该对象转换为请求的JSON
此外，您的服务返回的是一个字符串，而不是JSON，因此您需要删除数据类型：“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); }
});

这将允许任何来源调用该服务，您可能希望将其限制在某些来源。
根据服务定义，它期望JSON作为请求格式，但您传递的是表单编码的键/值对。因此，将数据部分更改为：
data: {a : No1, b : No2},

这将传递一个对象，因为您将内容类型设置为JSON，jQuery将自动将该对象转换为请求的JSON
此外，您的服务返回的是一个字符串，而不是JSON，因此您需要删除数据类型：“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); }
});

这将允许任何来源调用该服务，您可能希望将其限制在某些来源。
试试这个
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); }
        });
    });
});


$（文档）.ready（函数（）{
$（'#BtnRegister'）。单击（函数（）{
调试器；
var No1=document.getElementById（'TxtFirstNumber'）。值；
var No2=document.getElementById（'TxtSecondNumber'）。值；
var params={a:No1，b:No2}
$.ajax({
cache:false，
键入：“获取”，
async:false，
url:“http://localhost:22727/Service1.svc/Display",
数据：params，
contentType:“application/json；charset=ytf-8”，
数据类型：“json”，
processData：对，
成功：功能（结果）{
警报（“数据”）；
},
错误：函数（xhr，textStatus，errorhorn）{alert（textStatus+'：'+errorhorn）；}
});
});
});

试试这个
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); }
        });
    });
});


$（文档）.ready（函数（）{
$（'#BtnRegister'）。单击（函数（）{
调试器；
var No1=document.getElementById（'TxtFirstNumber'）。值；
var No2=document.getElementById（'TxtSecondNumber'）。值；
var params={a:No1，b:No2}
$.ajax({
cache:false，
键入：“获取”，
async:false，
url:“http://localhost:22727/Service1.svc/Display",
数据：params，
contentType:“application/json；charset=ytf-8”，
数据类型：“json”，
processData：对，
成功：功能（结果）{
警报（“数据”）；
},
错误：函数（xhr，textStatus，errorhorn）{alert（textStatus+'：'+errorhorn）；}
});
});
});

我认为数据应该是这样的对象，并删除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({
cache:false，
键入：“获取”，
url:“http://localhost:22727/Service1.svc/Display",
数据：{
a:第一，
b:第二
},
contentType:“application/json；charset=ytf-8”，
数据类型：“json”，
processData：对，
成功：功能（结果）{
警报（“数据”）；
},
错误：函数（xhr，textStatus，errorhorn）{alert（textStatus+'：'+errorhorn）；}
});
我认为数据应该是这样的对象，并删除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({