表单提交应该只刷新 Div，而是刷新页面答案

【问题标题】：Form submit supposed to refresh only Div, but instead refreshes Page表单提交应该只刷新 Div，而是刷新页面
【发布时间】：2014-09-24 06:25:00
【问题描述】：

我有一个名为“leaguestatus.php”的 PHP 页面。此页面允许用户发布消息/状态更新，目的是仅刷新 div 的这一部分；但是，在提交时，整个页面都会重新加载。

在当前的实现中，我只是将所有 $_POST 变量打印到 div 中，这样我就可以看到发生了什么。 MsgText textarea 确实会发布，但是，只有在整个页面加载之后。我试图让 div 和包含的文件重新加载。

div id="statusupdates"><? include 'leaguestatus.php'; ?></div>

leaguestatus.php

<form id="statusform" method="POST">
<textarea name=MsgText rows=5 cols=40></textarea><BR>
<input type=submit value=Post id=uhsbutton>
</form>

<BR>
<BR>

<div id='formbox'>
<? print "<pre>POST Variables:<BR>";
    print_r ($_POST);
    print "</pre>";
    $MsgText = $_POST["MsgText"];
?>
</div>

我在头部运行的jQuery是：

$(document).ready(function() {
    $("#statusform").submit(function(e) {
        e.preventDefault();
        var formData=$(this).serialize();
        var pUrl="leaguestatus.php";

        submitFormSave(formData, pUrl);
    });

    function submitFormSave(formData, pUrl) {
        $.ajax({
            url: pUrl,
            type: 'POST',
            data:formData,
            success: function(response) {
                $("#formbox").html(response);
            }
        }).success(function(){

        });
    }
});

这是我的内容：

html 标头

<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

编辑：更新代码以反映@sazedul 响应的使用。现在唯一的问题是第一次点击页面按预期运行（无页面刷新）。第二次点击整个页面重新加载。第三次点击就恢复正常了。

【问题讨论】：

你打开控制台检查错误了吗？
hmmm...ajaxSubmit 显然是一个未定义的类型...让我挖掘一下。
现在我似乎收到了返回 false 的 TypeError；

标签： php jquery html refresh

【解决方案1】：

检查.load()，如下面的代码......

$(document).ready(function() {
    $("#statusform").submit(function() {
        $("div").load();
    });
});

【讨论】：

【解决方案2】：

你必须防止默认提交然后其他事情

所以，你必须使用 e.preventDefault() 来阻止提交。然后做你想做的事

 $("#statusform").submit(function(e) {
e.preventDefault();

......

【讨论】：

这给了我更多的成功（即没有发布），但是，我仍然收到这个 TypeError: undefined is not a function for the $(this).ajaxSubmit(options);线。我已确保添加了 jquery.form.js 行，但老实说，我不确定我还需要什么才能使其正常工作。
完全错误是 Uncaught TypeError: undefined is not a function / (anonymous function) / jQuery.event.dispatch / elemData.handle.eventHandle.我觉得我快到了……这可能是它起作用之前的最后一点。
我也试过改变那个 $(this).ajaxSubmit(options);成为 $.ajax(options);但是它似乎没有提交（或者至少在点击提交后没有显示 POST 变量）。我也没有收到任何错误（所以这有点令人鼓舞......只需要弄清楚那些 POST 变量的去向）。

【解决方案3】：

使用以下代码进行 ajax 提交，希望它能正常工作。

$("#statusform").submit(function(e) {
e.preventDefault();
var formData=$(this).serialize();
var pUrl="leaguestatus.php";

 submitFormSave(formData, pUrl);

    });

     function submitFormSave(formData, pUrl)
     {

        $.ajax({
            url: pUrl,
            type: 'POST',
            data:formData,
            success: function(response)
            {

                $("#formbox").html(response);

            }

        });
    }

【讨论】：

我们快到了...我没有收到任何错误，但是，我看到了一些奇怪的行为：第一次点击时，页面刷新没有问题，我看到了 POST 数据（HURRAH !!)... 在第二次点击时，整个页面重新加载。如果我第三次点击，页面会像第一次一样刷新……没问题。
我创建了一个控制脚本，除了上面的代码之外，我没有其他任何东西在运行......第二次点击行为没有发生......我的其他脚本正在发生其他事情导致问题。非常感谢您的帮助！

【解决方案4】：

在您的leaguestatus.php 中进行以下更改
记住在文本区域的name="MsgText" 中添加双引号。

<form id="statusform" method="POST">
<textarea name="MsgText" rows=5 cols=40></textarea><BR>
<input type=submit value=Post id=uhsbutton>
</form>

<BR>
<BR>

<div id='formbox'>

</div>

<?php 

if(isset($_POST['MsgText'])){

$message=$_POST['MsgText'];

echo $message;

}

?>

【讨论】：