Question

我有一个名为'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响应的使用。现在只有第一次点击页面的问题按预期进行（没有页面刷新）。在第二次单击时，整个页面重新加载。点击第三次，我们恢复正常。

Answer 1

使用以下代码进行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);

            }

        });
    }

Answer 2

在你的leaguestatus.php中进行了以下更改，记住将双引号放在名称=＆＃34; MsgText＆＃34;在文本区域。

<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;

}

?>

Answer 3

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

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

Answer 4

你必须阻止提交然后提交其他东西

所以，你必须使用e.preventDefault（）来阻止提交。然后你想做什么

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

...

表单提交应该只刷新Div，而是刷新Page

4 个答案: