Question

我有一个表单，我希望管理员填写，然后单击提交并运行ajax。然而，当这个工作时，它也会在页面加载后立即运行，这是我不想发生的事情。代码如下：

<script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">        </script>
<script src ="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<style type="text/css">

</style>
<script type="text/javascript">
$(document).ready(function(){
  $("form").submit(function() {


$.ajax({
  type: "POST",
  url: "ajaxtest.php",
  async:false,
  data: { product_id: "1" }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});

});
});
</script>
</head>

<body>

<form id="frmAJAX" action="" method="POST" >
<input type="hidden" name="product_id" value="<?php echo $product_id; ?>"/>
<p><strong>ID:</strong> <?php echo $product_id; ?></p>
<label name="product_sku" type="text">Item SKU</label>
<input type="text"  value="<?=$product_sku?>" name="product_sku"/><br />
<label name="product_name" type="text">Item</label>
<input type="text" value="<?=$product_name?>"  name="product_name"/><br />


<input type="submit" name="submit" value="Submit">
</form>

<div id="results"></div>
</body>
</html>

我想要做的是在页面加载时保持ajax不运行，但是在使用提交按钮时让它运行。有什么建议吗？

Answer 1

您可以尝试将提交按钮更改为键入=“按钮”，然后将表单提交功能更改为此按钮的单击事件。表单提交逻辑中的这种更改可能有助于解决问题或揭示问题所在。例如：

$('#[buttonid]').click(function(){
    //put ajax function here
});

Answer 2

在AJAX通话结束时，您可能需要return false。我个人也试试@TheAmazingJason的方式。

Answer 3

您可以尝试通过为选择表单提供ID而不是像

这样的标记

$("#frmAJAX").submit(function() {

如何使ajax在页面加载时不运行，但只有在表单上提交时才会被推送？

3 个答案: