JQuery Ajax调用将被触发onClick

Question

我是JavaScript，Jquery和Ajax的新手。 这就是我想要做的：

我的HTML代码中有一个按钮，我想触发一个AJAX调用，该调用将向在我的本地机器上运行的Web服务器发出GET请求。

这是我到目前为止：

JS代码：

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script type="text/javascript"> $('call').click(function() { alert("hiii"); $.ajax({ 'url' : 'localhost:8080/blah/blah/blah', 'type' : 'GET', beforeSend: function() { alert(1); }, error: function() { alert('Error'); }, 'success' : function(data) { if (data == "success") { alert('request sent!'); } } }); }); </script>

HTML代码：

 <body> <div> <form> <div class = "buttons"> <input type="submit" id="call" value="call"> </div> </form> </div> </body>

有人能帮助我吗？ 提前致谢！

Answer 1

您的代码存在一些问题。 例如，您的选择器不指向任何类或ID。 您需要使用.call或#call分别为一类或ID。 其次，您的脚本没有document.ready函数。 看看下面的代码。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
    // document.ready function
    $(function() {
        // selector has to be . for a class name and # for an ID
        $('.call').click(function(e) {
            e.preventDefault(); // prevent form from reloading page
            alert("hiii");

            $.ajax({
                'url' : 'localhost:8080/blah/blah/blah',
                'type' : 'GET',
                beforeSend: function() {
                   alert(1);
                },
                error: function() {
                   alert('Error');
                },
                'success' : function(data) {
                   if (data == "success") {
                        alert('request sent!');
                   }
                }
            });
        });
    });
</script>

Answer 2

正如@NightOwlPrgmr提到你的选择器是错误的。 要纠正这一点，你必须使用#call而不是.call因为这是一个ID而不是一个类属性。 Document.ready函数还将确保在加载所有html元素后运行代码。 这将降低尝试使用尚未创建的元素的风险。 类似于上面的示例代码是： -

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
    </script>
</head>
<body>
    <div>
        <form>
            <div class = "buttons">
              <input type="submit" id="call" value="call">
            </div>
        </form>
    </div>
    <script type="text/javascript">
        // document.ready function
        $(document).ready(function() {
            // selector has to be . for a class name and # for an ID
            $('#call').click(function(e) {
                e.preventDefault(); // prevent form from reloading page
                alert("hiii");

                $.ajax({
                    'url' : 'localhost:[port_number_web_server]/blah/blah/blah',
                    'type' : 'GET',
                    beforeSend: function() {
                       alert(1);
                    },
                    error: function() {
                       alert('Error');
                    },
                    'success' : function(data) {
                       if (data == "success") {
                            alert('request sent!');
                       }
                    }
                });
            });
        });
    </script>
</body>

JQuery Ajax调用将被触发onClick

问题描述

2 个解决方案

解决方案1
4 2015-06-20 05:22:14

解决方案2
1 2017-09-20 12:25:56

JQuery Ajax调用将被触发onClick

问题描述

2 个解决方案

解决方案1 4 2015-06-20 05:22:14

解决方案2 1 2017-09-20 12:25:56

解决方案1
4 2015-06-20 05:22:14

解决方案2
1 2017-09-20 12:25:56