为什么这个ajax帖子会被调用两次?

时间:2012-12-21 00:45:08

标签: jquery

在查看其他SO帖子后,我没有找到我的问题的答案 - 但显然这种类型的问题发生在其他人身上,而不是我的问题。但是ajax .post函数被调用了两次,但我不太明白为什么。

这是jQuery 1.8.0,使用Firefox(Iceweasel)浏览器。

这是我的jquery代码,它将函数附加到四个按钮,编辑,保存,新建,取消。还有一个填充选择列表的功能:

  var is_new = 0;

  $(document).ready(function()
  {
    // Attach event handlers to buttons
    $('#editbtn').on('click',pop_studyname);
    $('#newbtn').on('click',new_studyname);
    $('#savebtn').on('click',save_studyname);
    // disable the Save button until we have something to save
    $('#savebtn').attr('disabled',true);
    // disable the Cancel button until we have something to cancel
    $('#cancelbtn').attr('disabled',true);

  });

  function pop_studyname()
  {
    // pop the selected studyname into edit box.
    $('#edit_field').val($('#studylist :selected').text());
    // disable the New Study button
    $('#newbtn').attr('disabled',true);
    // enable the Cancel button
    $('#cancelbtn').attr('disabled',false);
    // and bind it to a function
    $('#cancelbtn').on('click',cancel_studyname);    
    // enable the Save button
    $('#savebtn').attr('disabled',false);
    // and bind it to a function
    $('#savebtn').on('click',save_studyname);
  }

  function new_studyname()
  {
    // clear edit box.
    $('#edit_field').val('');
    /**************************/
    /* set flag for New Study */
    is_new = 1;
    /**************************/

    // Enable the Cancel button
    $('#cancelbtn').attr('disabled',false);
    // and bind it to a function.
    $('#cancelbtn').on('click',cancel_studyname);
    // Disable the Edit button.
    $('#editbtn').attr('disabled',true);
    // Enable the Save button
    $('#savebtn').attr('disabled',false);
    // and bind it to a function.
    $('#savebtn').on('click',save_studyname);
    // put the cursor in the edit box
    $('#edit_field').focus();
  }

  function cancel_studyname()
  {
    // clear edit box.
    $('#edit_field').val('');
    // disable cancel button.
    $('#cancelbtn').attr('disabled',true);
    // disable Save button.
    $('#savebtn').attr('disabled',true);
    // Enable the Edit button.
    $('#editbtn').attr('disabled',false);
    // And the New Study button.
    $('#newbtn').attr('disabled',false);
    // Reset new study trigger variable. 
    is_new = 0;
  }

  function save_studyname()
  {
    // Are we saving a new or existing Study?
    if (is_new == 1) {
        $.post("saveStudyName.php",
        {'type': 'new', 'studyname': $('#edit_field').val()},
            function(resultmsg) {
              alert(resultmsg);
            }
        );
    // reset the trigger flag
    is_new = 0;

    } else {
      // Update an existing Study.
        // Get the record index and edited study name.
        var styndx = $('#studylist option:selected').val();
        var studyname = $('#edit_field').val();

    // Use ajax post call to update database.
        $.post("saveStudyName.php",
      {'type': 'update', 'studyname':studyname, 'styndx':styndx}, 
      function(resultmsg) {
              alert(resultmsg);
      });
    }
    // clear the edit field
    $('#edit_field').val('');
    // disable the Save button
    $('#savebtn').attr('disabled',true);
    // Enable the Edit button.
    $('#editbtn').attr('disabled',false);
    // Enable the New Study button.
    $('#newbtn').attr('disabled',false);
    // Finally, refresh the studyname picklist.
    refresh_studynames();
  }

  function refresh_studynames()
  {
    // repopulate studylist with update from database...
    // - form the query.
    // - send to database, get the result.
    // - use the result to repopulate the Study name select list.
    $.ajax({                                      
      url: 'getStudyNames.php',        //the script to call to get data          
      data: "",                        //you can insert url argumnets here to pass to api.php
                                       //for example "id=5&parent=6"
      dataType: 'json',                //data format
      error: function() {
        alert('Refresh of study names failed.');
      },
      success: function(data) 
      {
    var $studylist = $('#studylist').empty();
    $.each(data, function(i, record) {
       $studylist.append($("<option/>", {
        value: record.studyindex,
        text: record.studyname
        }));
    });
      } 
    });
  }

查看Web控制台和调试器,我可以看到两个POST(to saveStudyName.php)和两个GET(来自getStudyNames.php)正在发生,彼此之间只有几毫秒。第一个电话是正确的;但第二个不应该发生。由于涉及的逻辑,第二次调用中的参数不正确并且失败。

为完整起见,这是HTML代码:

<body >
<div id="container">
  <div id="header">
    <h1>Admin Module</h1>
  </div>
  <div id="navigation">
    <ul>
    <li><a href="AdminMenu.php">Admin Menu</a></li>
    <li><a href="../DNAPortal/DNA_Portal_Menu.php">DNA Portal</a></li>
    <li><a href='../DNAPortal/logout.php'>Logout</a></li>>
    </ul>
  </div>
  <div id="content">
    <h2>IBG Study Maintenance</h2>
    <p>
    <form name="StudySelection" action="process_StudyMaint.php" method="POST" onsubmit="return false" >
    <input type=hidden name=studyindex>
    <div id=content-container2>
      <fieldset>
      <LEGEND><b>Select Study &/or action</b></LEGEND>
    <p>
    <P CLASS=select_header>List of Studies<br>
    <SELECT multiple size=15 NAME="studylist" ID="studylist" STYLE="width: 150px">
    <?php
        $i=0;
        while ($i < $numstudies) {
            $styarr = pg_fetch_row($studyresult);
            echo "<option value=$styarr[0]>$styarr[1]\n";
            $i++;           
        }
      ?>
    </select>
    </p>                
      </fieldset>
    </div>
    <div  >

    </div>
    <div class="lower_block">
      Study name:<br>
      <input id="edit_field" type="text" size=30>
      <input type="button" name="editbtn" id="editbtn" value="Edit" sclass="btn">
      <input type="button" name="savebtn" id="savebtn" value="Save" sclass="btn">
      <input type="button" name="newbtn" id="newbtn" value="New Study" sclass="btn">
      <input type="button" name="cancelbtn" id="cancelbtn" value="Cancel" sclass="btn" disabled=TRUE >
    </div>
  </div>
</div>
</form>
</body>

有没有办法阻止第二次通话?我看不出为什么会发生这种情况。

任何帮助非常感谢!太棒了!

- rixter

2 个答案:

答案 0 :(得分:3)

如果您在保存之前点击编辑或新建,那么它会被调用两次,因为您这么说了。

加载页面后,请致电:$('#savebtn').on('click',save_studyname);

pop_studyname()new_studyname()按钮上的回调函数EditNew包含相同的行。

如果你为同一个活动做多个.on(),你会收到多个电话。你需要确保它只被调用一次。

答案 1 :(得分:0)

请试试这个,它对我有用......

$(this).unbind();