javascript - AJAX HTTP post请求被触发3次

Question

在我的web应用程序中，Ajax请求执行了3次，我不知道为什么会发生这种情况。有人可以帮忙吗？

我的 JavaScript:

$(document).ready(function() {
  console.log("ready!");


  $('form').on('submit', function(e) { //
  e.preventDefault();
  // on form submission ...    
    console.log("the form has beeen submitted");

    // grab values
    valueOne = $('input[name="perfid"]').val();
    valueTwo = $('input[name="hostname"]').val();
    valueThree = $('input[name="iteration"]').val();


    console.log(valueOne)
    console.log(valueTwo)
    console.log(valueThree)



    $.ajax({
      type: "POST",
      url: "/",
      dataType:'json',
      data : { 'first': valueOne,'second': valueTwo,'third': valueThree},
      success: function(data) {

       var res = data.AVG;
       var p = '<p><pre>'+res+'</pre></p>';
       $('#result').append(p);

      },
      error: function(error) {
        console.log(error)
      }
    });
 });  });

我的 HTML 是:

 <form role="form" method="post" onsubmit="return false;">
                            <div class="form-group">
                                <input type="text" class="input-medium" id="perfid" name="perfid" placeholder="Enter a Perf ID" required style="height:30px;">
                                <input type="text" class="input-medium" id="hostname" name="hostname" placeholder="Enter a HostName"  style="height:30px;">
                                <input type="text" class="input-medium" id="iteration" name="iteration" placeholder="Enter a Iteration" required style="height:30px;">
                                <button type="submit" class="btn btn-default" style="height:30px;">Get Data</button>
                            </div>

                        </form>

我只为一个 AJAX POST 请求编写了代码，

编辑:

这是控制台输出:

Answer 1

请确保您只包含一次js文件，并在提交事件回调末尾添加return false