Question

我已经查了很多教程并在这里进行了搜索，但没有找到解决我特定问题的任何内容。我猜我的代码中某处有语法错误或逻辑错误。我的问题是每当我提交表单时，我都会被引导到test.php页面。 PHP正在正常工作，因为它返回正确的结果，但我只是希望它运行并显示下面提交的表单信息。任何帮助将不胜感激。

的index.html

<html>
<head>
<title>Computer swap form</title>
</head>
<body>
<form method = "post" action = "test.php" id="computerForm">
Serial Number: <br>
<input name="serialnumber" type="text">

<button id = "sub"> Submit </button>
</form>
<!--display the response returned after form submit -->
<span id ="result"></span>

<script type="text/javascript" src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script src="script/my_script.js" type="text/javascript"></script>

</body>
</html>

test.php的

<?php

$sn = $_POST['serialnumber'];

if(!isset($sn))
{
    echo "error serial number not set";
}
else {
    echo "$sn successfully saved";
}
?>

my_script.js

$("#sub").click( function() {
 $.post( $("#computerForm").attr("action"), 
         $("#computerForm").serialize(), 
         function(info){ $("#result").html(info); 
   });
});

$("#computerForm").submit( function() {
  return false; 
});

Answer 1

要实现您的要求，请将所有逻辑放在submit处理程序中，并在提供给处理函数的事件参数上调用preventDefault()：

$("#computerForm").submit(function(e) {
  e.preventDefault();
  $.post(this.action, $(this).serialize(), function(info) {
    $("#result").html(info);
  });
});

在表单提交上停止页面重定向

1 个答案: