JQuery按钮不会通过ajax触发服务调用

时间:2016-06-20 11:04:20

标签: c# jquery ajax wcf

我有一个JSON服务,我试图通过网页中的jquery通过ajax调用来执行此服务。当我创建按钮并尝试执行单击事件但我无法获得任何警报消息以及服务调用也不会触发这意味着单击事件本身根本不会触发。请帮忙!

下面是代码

 <title></title>
    <script src="JavaScript.js"></script>
    <script type="text/javascript">
        $(document).ready(function () { });
        $('#buttonnew').click(function () {
            alert("Hi");
            $.ajax({
                url: 'service2.svc/GetRestriction',
                method: 'post',
                contentType: 'application/json',
                data: ({ property: '99883', code: 1 }),
                dataType: 'json',
                success: function (DATA) {
                    alert("hi");
                },
                error: function (err) {
                    alert(err);
                }
            });
        });
    </script>

2 个答案:

答案 0 :(得分:2)

您需要在加载DOM时连接click事件。

 $(document).ready(function(e) {

         $('#buttonnew').click(function () {
                alert("Hi");
                $.ajax({
                    url: 'service2.svc/GetRestriction',
                    method: 'post',
                    contentType: 'application/json',
                    data: ({ property: '99883', code: 1 }),
                    dataType: 'json',
                    success: function (DATA) {
                        alert("hi");
                    },
                    error: function (err) {
                        alert(err);
                    }
                });
            });    
    });

答案 1 :(得分:1)

我认为您的代码中唯一的错误是您在文档准备好之前将按钮事件放在按钮上。所以你可以试试这个:

 <title></title>
    <script src="JavaScript.js"></script>
    <script type="text/javascript">
        $(document).ready(function () { 
           $('#buttonnew').click(function () {
            alert("Hi");
            $.ajax({
                url: 'service2.svc/GetRestriction',
                method: 'post',
                contentType: 'application/json',
                data: ({ property: '99883', code: 1 }),
                dataType: 'json',
                success: function (DATA) {
                    alert("hi");
                },
                error: function (err) {
                    alert(err);
                }
            });
          });
        });
    </script>

我已经用Jquery 2.2.2进行了测试。

我希望它有所帮助!