Question

在我的webapp中，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

Answer 2

查看选择器

$('form').on('submit', function(e) {

如果页面有3个表单，则上述选择器将执行3次尝试像这样添加id到表单。抱歉我的英文不好

AJAX HTTP post请求被触发3次

2 个答案: