javascript - Ajax 表单在当前页面提交

Question

我想通过ajax提交表单并将其发送到我当前的页面以防止刷新。

这是我的 HTML:

<form id="suchForm" method="post" action="<?=$PHP_SELF?>">
    <input type="text" id="suche" name="suche" placeholder="Suchen"/>
    <input type="submit style="display:none;" />
</form>

顺便说一下，提交按钮是隐藏的，因此我通过按键盘上的回车键来提交表单。

这是我的 PHP 脚本:

if ( $_SERVER["REQUEST_METHOD"] == 'POST' ) {
    $suche = $_POST['suche'];
    if (!empty($suche)) {    
        <?php echo $suche ?>
    }  
 }  

最后，这是我当前的 Ajax 脚本:

var frm = $('#suchForm');
frm.submit(function (ev) {
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
            alert('ok');
        }
    });
    ev.preventDefault();
    }); 

表单已通过 Ajax 成功提交。问题:Ajax 脚本阻止刷新站点，因此 PHP 脚本不显示任何内容 ( <?php echo $suche ?> )。您是否有任何解决方案可以使用 Ajax 发送表单，防止刷新(因为提交后应该发生一些 javascript)并显示 PHP 回显？

Answer 1

尝试替换alert('ok');以及显示 ajax 响应的代码。像这样的东西应该有效 -

var frm = $('#suchForm');
frm.submit(function (ev) {
$.ajax({
    type: frm.attr('method'),
    url: frm.attr('action'),
    data: frm.serialize(),
    success: function (data) {
        $('<NAME_OF_YOUR_CONTAINER_TO_DISPLAY_RESPONSE>').html(data);
    }
});
ev.preventDefault();
});