Question

我正在处理一个登录表单，该表单在按下按钮时加载div（.messageboxcontent的父级）并.load加载。这一切都有效，直到第三次我按下提交，div再次消失（我猜是通过重新加载页面并隐藏div CSS）。该网址在第三次提交（$_POST）后添加了?username=<whatever_I_Fill_In_As_3rd>数据。

<div class="messageboxcontent">
<form id="ajaxform">

<table>
    <tr>
        <td>Gebruikersnaam: </td><td><input type="text" name="username"  /></td><td>
    </tr>
</table>
<input type="submit" value="Registreer" id="submit" />
</form>
</div>


<script>
$('form').on('submit', function( event )
{
var dataString = $(this).serialize();
event.stopPropagation();

//event.preventDefault();

$.ajax(
{
    type: "POST",
    url: "register.php",
    data: dataString,
    success: function(response)
    {
        $('.messageboxcontent').html(response);//FIXED by changing .messageboxcontent to parent.
    }
});
return false;
});
</script>

我尝试了不同的方法，如：

$('form').submit(function(event) {
//..
}

//

$('#ajaxform').submit(function(event) {
//..
}

//

$(document).ready(function() 
{    
$("#ajaxform").on("submit", function( event )
{
    var dataString = $(this).serialize();
    //event.stopPropagation();

    event.preventDefault();

    $.ajax(
    {
        type: "POST",
        url: "register.php",
        data: dataString,
        success: function(response)
        {
            $("div.messageboxcontent").html(response);
        }
    });
    return false; //with and without this.
});
});

Answer 1

与报价一致。也关闭你的div（<div class="messageboxcontent"></div>）试试这个：

$(document).ready(function(){
    $("#ajaxform").on("submit", function( event ){
        var dataString = $(this).serialize();
        event.preventDefault();
        $.ajax({
            type: "POST",
            url: "register.php",
            data: dataString,
            success: function(response)
            {
                $("div.messageboxcontent").html(response);
            }
        });
        return false;
    });
});

希望有所帮助。

Answer 2

你的ajax函数中的

return false;或event.preventDefault();会阻止页面重新加载。

其次，jQuery通过类或id使用选择器方法 - 因此，在您的情况下，您将需要使用$('#ajaxform')。

最后，您在第3次遇到意外结果的可能原因是因为您的表单包含在您想要操作结果的div中。因此，请尝试将您的DIV元素重新包装到：<div class="messageboxcontent"></div>并让您的<form>独立于messageboxcontent div。

Ajax发布表单工作2次，然后使用获取URL重新加载页面

2 个答案: