Question

我正在尝试提交表单并根据AJAX和PHP中的表单提交加载数据。我想在不重新加载页面的情况下完成此任务。

HTML / PHP的

<form method="POST">
  <button type="submit" name="image1">
  <button type="submit" name="image2">
  <button type="submit" name="image3">
  <button type="submit" name="image4">
</form>

<div>
// content gets loaded into here 
</div>

jquery的

$("form").submit(function(event) {
  event.preventDefault();
  $("div").load("content-load.php");
}

内容-load.php

$validInputs = array('image1', 'image2', 'image3', 'image4');

foreach ($validInputs as $v) {
  if(isset($_POST[$v])){
    // load content associated with image1, or image2, etc, into Div
   }
 }

是的，“event.preventDefault（）”是防止页面刷新的好方法。但它实际上并没有提交表格！我需要提交表单，因为我加载到Div的内容依赖于设置的“$ _POST [$ v]”。根据用户是单击第一个，第二个，第三个还是第四个提交按钮，content-load.php将遍历$ validInputs并确定按下了哪个按钮。根据单击的按钮，将加载特定内容。

如果我使用ajax并防止默认，则上述内容永远不会运行，因为表单被阻止提交。 php需要循环遍历数组并确定按下了哪个按钮 - 但是由于event.preventDefault没有按下任何按钮！如何在不使用页面刷新的情况下让php检测哪个按钮被“设置”？

Answer 1

当您在处理程序中使用event.preventDefault();时，它会取消表单提交操作。如果您想要在没有页面刷新的情况下提交表单，更好的方法是使用$.ajax并且$("div").load("content-load.php");应该成功回调。

Answer 2

如果您使用的是Jquery，那么$ .post就是您的朋友。

示例：

$.post( "ajax/test.html", function( data ) {
$( ".result" ).html( data );
});

进一步阅读：http://api.jquery.com/jquery.post/

提交表格而不刷新 - 并实际提交

2 个答案: