表单提交应该只刷新Div，但却刷新Page - Form submit supposed to refresh only Div, but instead refreshes Page

Form submit supposed to refresh only Div, but instead refreshes Page

本文关键字：刷新 Page Div 表单提交 | 更新日期: 2023-09-27

我有一个PHP页面包括'league . PHP '。这个页面允许用户发布消息/状态更新，目的是只刷新div的这一部分;然而，在提交时，整个页面被重新加载。

在当前的实现中，我只是将所有的$_POST变量打印到div中，这样我就可以看到发生了什么。MsgText文本区确实得到张贴，然而，它只是在整个页面加载之后。我正在尝试重新加载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>

我在header中运行的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的响应的使用。现在唯一的问题是在第一次点击页面按预期行事(没有页面刷新)。第二次点击整个页面重新加载。第三次点击，我们又恢复正常了

使用下面的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);
            }
        });
    }

在您的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;
}
?>

检查.load()是否存在，如下面的代码....

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

你必须使用preventDefault

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

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

…