logo标签列表

点击触发JQuery Ajax调用

javascriptjqueryhtmlajax
6

我是一个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>

有人能帮我吗？非常感谢！

2
出了什么问题？URL看起来可疑--可能需要在它前面加上“http://”或“https://”。 - Cymen
好的，如果我错了，请纠正我。当我点击按钮时，我至少应该看到alert('hiii');，对吗？但是我甚至没有达到那一步。 - ar88
2个回答
5

您的代码存在几个问题。首先，您的选择器没有指向任何类或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>
1

正如@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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接