提交表单而不刷新 - 并实际提交答案

【问题标题】：Submit Form Without Refresh -- and actually submit it提交表单而不刷新 - 并实际提交
【发布时间】：2015-10-10 02:11:46
【问题描述】：

我正在尝试提交表单并根据 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");
}

content-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 检测“设置”了哪个按钮？

【问题讨论】：

为了提交表单，您需要使用 jQuery 的 .ajax() 或 .post() 函数。 .load() 是 AJAX 的一个弱版本，主要充当对服务器的请求以返回一些信息。 Here are some basics. 另外，你可能想看看 HTML 中的一些基本表单设置。正如您所做的那样，多次提交并不是特别有效。

标签： javascript php jquery ajax forms

【解决方案1】：

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

【讨论】：

这真的会提交表单吗？我认为 .load 只是 $.ajax 的“缩小”版本
不，这不会提交表单。您可以使用 $.ajax 发出带有必要参数的发布请求。因为我们提交表单页面刷新的那一刻必然会发生，除非您使用一些 hacky 方法来防止带有隐藏 iframe 的表单目标属性，这将使事情变得复杂

【解决方案2】：

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

例子：

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

延伸阅读：http://api.jquery.com/jquery.post/

【讨论】：