Question

我有一个简单的表单，我使用ajax将数据提交到我的数据库。一切都很好。在表单提交后，我立即收到一条警告消息，其中包含文本＆＃34; Done＆＃34;。

我唯一的问题是，我的div现在应该自动重新加载，因此用户可以在点击＆＃34; OK＆＃34;之后立即看到发布的结果。警报消息中的按钮。有人能告诉我如何实现这一目标吗？这是我的代码。

$(function() {
    $('#form2').on(\"submit\", function(event) {
        event.preventDefault();

        $.ajax({
            url: 'index.php',
            type: 'post',
            data: $(this).serialize(),
            beforeSend: function(){
                $('#loading').show();
            },
            complete: function(){
                $('#loading').hide();
            },
            success: function() {
                alert('Done');
            }
        });
    });
});

<div id='refreshtodo'>
    <form name='form2' id='form2' action='./index.php' method='post'>
        <input type='text' class='big' name='duedate' size='10' maxlength='10' value='".date("d.m.Y")."'>
        <input type='submit' class='btn btn-info btn-sm' role='button' value='add'>
        <div id='loading' style='display:none;'>
            <img src=\"./bootstrap/assets/images/spinner-loading-small.gif\" alt=\"Loading - Please wait...\" />
    </form>
</div>

在警告消息中单击“确定”后，应重新加载DIV #refreshtodo

Answer 1

您应该在echo的div中显示index.php结果，例如：

//your index code
...

echo "this is the result".

然后在你的js中你应该打印从你的php页面{div} result中返回的#refreshtodo：

....
success: function(result) {
     alert('Done');
     $("#refreshtodo").html(result);
}

希望这有帮助。

Answer 2

您需要将响应数据插入HTML（DOM）。

尝试使用此JS

let data = event.dataTransfer.getData("application/x-moz-node");
let draggableId= event.dataTransfer.getData("my-draggable-id");
event.target.appendChild(document.getElementById(draggableId));

这将从HTML中删除您的表单。我建议创建一个具有不同ID的第二个div（例如“#todo-response”）并在那里显示响应。

您还需要确保PHP脚本返回您希望显示的HTML内容。

我希望有所帮助。

Answer 3

您的ajax是否会将您想要输入的内容返回到表单中？它是返回HTML还是json / xml？

如果是HTML

success: function(data) {
    alert('Done');
    $('#refreshtodo').html(data);
}

JSON会要求您手动将对象中的数据映射到表单元素中的值。

目前，#refresthtodo中的所有内容都是表单。因此，如果您只是想重置表单：

var form = document.getElementById("form2");
form.reset();

在使用AJAX提交表单后刷新div

3 个答案: