Ajax 表单在当前页面提交答案

【问题标题】：Ajax form submit on current pageAjax 表单在当前页面提交
【发布时间】：2015-10-08 07:00:15
【问题描述】：

我想通过 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 回显？

【问题讨论】：

ajax success 之后会发生什么？
成功后更新 DOM
$('#suchForm').reset() 在alert('ok'); 之后怎么样？
<?php echo $suche; ?> 你忘了把; 放在$suche 之后。
提交表单后，一个 div 应该由 jQuery 打开/显示。我页面刷新 div 正在立即关闭...

标签： javascript php jquery ajax forms

【解决方案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();
});

【讨论】：

改变后你得到了什么？
表单输入由 PHP 在一个隐藏的 div 中给出。表单提交后，div 应该由 jQuery 打开/显示。
@susanloek php 输出以data 的形式返回到您的 Ajax 成功函数 success: function(data)。您需要自己将其包含到您的 DOM 中。

【解决方案2】：

如果$suche 不是empty，php 将echo 它。因此，如果您当时可以查看该页面，您会看到您所期望的，但在这种情况下，您有 AJAX 为您执行提交，因此 AJAX 是可以“看到”它的人。如果您想显示 AJAX 可以“看到”的内容，那么只需在接收数据的success: function()... 中做任何您想做的事情。你可以alert(data)而不是alert("OK")来获取更多线索。

【讨论】：