使用ajax在php中显示成功消息

我正在使用OO-php处理一个项目，我希望在单击提交时显示成功消息 我已经在网上搜索了所有内容，但得到的解决方案对我来说并不适用

我试着同时使用jquery和ajax，但还是不断出现同样的错误

这是我的html

<form method="post" id="postForm" class="form-horizontal" action = "index.php">
  <div class="form-group">
    <label for="Title" class="control-label col-sm-3">Title</label>
    <div class="col-sm-9">
       <input type="text" class="form-control" name="title" id="title" placeholder="Enter Title of your Post"/>
    </div>
  </div>
  <div class="form-group">
    <label for="Title" class="control-label col-sm-3">Body</label>
    <div class="col-sm-9">
      <Textarea type="text" class="form-control" name="body" id="body" placeholder="Enter Body of your Post"></textarea>
    </div>
  </div>

  <button type="submit" class="btn btn-default" name="submit">submit</button><br/>
  <div class="text-center">
    <span id="success" class="text-success"></span>
    <span id="wanings" class="text-danger"></span>
   </div>
</form>

标题
身体
提交

这是插入到同一页面index.php中的jquery脚本文件

<script>
        $(document).ready(function(){
            $('#postForm').submit(function(event){
                event.preventDefault();

            var $form = $(this),
            var title = $('#title').val();
            var body = $('#body').val();
            var url = $form.attr('action');
            var method = $form.attr('method');

                if(title == '' || body == ''){
                    $('#warnings').html('All Fields are Required');
                }else{
                    $('#warnings').html('');
                    $.ajax({
                        url: url,
                        method:method,
                        data:{title: title, body:body},
                        success:function(data){
                            $('#postForm').trigger('reset');
                            $('#success').fadeIn().html(data);
                            setTimeout(function function_name() {
                                $('#success').fadeOut('slow');
                            }, 3000);

                        }
                    });

                }

            });
        });
    </script>

$（文档）.ready（函数（）{
$（'#postForm'）。提交（函数（事件）{
event.preventDefault（）；
var$form=$（此），
var title=$（'#title'）.val（）；
var body=$（'#body'）.val（）；
var url=$form.attr（'action'）；
var method=$form.attr（'method'）；
如果（标题=“”| |正文=“”）{
$（'#warnings'）.html（'所有字段均为必填项'）；
}否则{
$（'#warnings'）.html（''）；
$.ajax({
url:url，
方法:方法,，
数据：{title:title，body:body}，
成功：功能（数据）{
$（'#postForm'）。触发器（'reset'）；
$（'#success'）.fadeIn（）.html（数据）；
setTimeout（函数名（）{
$（'success'）。淡出（'slow'）；
}, 3000);
}
});
}
});
});

在同一个页面中，Php位于Html的正上方。它应该获取文章标题并将其插入数据库，但如果单击submit，则会回显数据已成功添加的消息

下面是片段

<?php
        require 'classes/Database.php';

        $database = new Database;
        $post = filter_input_array(INPUT_POST, FILTER_SANITIZE_STRING);

        if($post['submit']){
            $title = $post['title'];
            $body = $post['body'];

            $database->query('INSERT INTO posts (title, body) VALUES(:title, :body)');
            $database->bind(':title', $title);
            $database->bind(':body', $body);
            $database->execute();
            if($database->lastInsertId()){
               echo "<h1>Post added Successfully To the Database</h1>";         
            }
        }

    ?>

当我在浏览器中运行页面时，它会在div中显示整个html

而不是消息集，然后在控制台中抛出以下错误

---

你们中有谁知道为什么它不能显示信息吗？谢谢

您需要检查if（$\u POST）而不是if（$POST['submit']），因为在您的情况下，它不会进入if条件，并且会回显您的结果。同样在echo之后添加“exit”语句，这样表单就不会以除法打印。

正如您在图像中注意到的，所有文本都是绿色的，这是因为您在该文本成功范围内呈现响应。不理想

而不是用HTML响应，而是用JSON响应，并在javascript中进行检查以确定是成功还是警告

其他一些问题：

• 您没有向上发送

  submit

  ，因此它将始终跳过if语句

因此，请尝试以下方法：

$（文档）.ready（函数（）{
$（'#postForm'）。提交（函数（事件）{
event.preventDefault（）；
var$form=$（此）；
var title=$（'#title'）.val（）；
var body=$（'#body'）.val（）；
var url=$form.attr（'action'）；
var method=$form.attr（'method'）；
如果（标题=“”| |正文=“”）{
$（'#warnings'）.html（'所有字段均为必填项'）；
如果（标题=“”）{
$（'#title'）。最近（'.form group'）。查找（'.help block'）。html（'title是必填字段'）
}
如果（正文=“”）{
$（'#body'）。最近（'.form group'）。查找（'.help block'）。html（'body是必填字段'）
}
}否则{
$（'#warnings'）.html（''）；
$form.find（'.help block'）.html（''）
$.ajax({
url:url，
方法:方法,，
数据：{
标题:标题,，
身体：身体
},
成功：功能（响应）{
//从服务器获取错误
如果（response.status==='error'）{
if（response.errors.title）{
$（'#title'）.closest（'.form group'）.find（'.help block'）.html（response.errors.title）
}
if（response.errors.body）{
$（'#body'）.closest（'.form group'）.find（'.help block'）.html（response.errors.body）
}
if（response.errors.global）{
$（'#warnings'）.html（response.errors.global）
}
}
//一切都好，将信息分配给成功
否则{
$（'#success'）.fadeIn（）.html（response.msg）；
setTimeout（函数（）{
$（'success'）。淡出（'slow'）；
}, 3000);
$（'#postForm'）。触发器（'reset'）；
}
}
});
}
});
});

标题
身体
提交

这不是错误，而是警告。似乎您的jQuery已配置为同步发出所有Ajax请求，这已被弃用。将输入按钮类型更改为buttontip：发送json并使用json而不是html响应，请检查并呈现javascript中的成功/错误。@Rp9-因为存在
事件。preventDefault（）
，这没关系。您的数据库类返回其连接成功消息，请检查此
$\u POST['submit']
而不是此
如果（$POST['submit']）
这修复了html的重新呈现，但仍然没有显示“POST Added Successfully”。错误显示良好，但提交时没有错误，“成功添加的帖子不起作用”@lawrencerone