没有刷新页面ajax的刷新帖子用户不起作用答案

【问题标题】：refresh post user without refresh page ajax not working没有刷新页面ajax的刷新帖子用户不起作用
【发布时间】：2018-06-14 10:18:26
【问题描述】：

我不知道，不工作！

-我有用户的表格帖子

我想显示帖子而不使用 ajax 刷新页面

 <form class="posting" method="POST" autocomplete="off" 
   action="createpost.php">      

        <textarea name="text" class="textarea" ></textarea>

<button class="btn-ajouter" type="submit" name="ajouter" value="ajouter">ajouter</button>                           
</form>

//代码mysql同页

 <?php 

       $stmt = $connect->query('SELECT post FROM publications
                                  ORDER BY date_post DESC ');

      while($row=$stmt->fetch() )
      {
 ?>
           <div class="allpost"> 

 <?php 
          echo $row['post'].'<br>' ;
  ?>
           </div>

 <?php 
   }
   ?>

(jquery 存在于页面索引中) ()

  <script>
  $(function () {

    $('form').on('submit', function (e) {

      e.preventDefault();

      $.ajax({
        type: 'post',
        url: 'createpost.php',
        data: $('form').serialize(),
        success: function () {
          alert('form was submitted');
        }
      });

    });

  });
</script>

-但不工作

【问题讨论】：

编辑抱歉 $('form').on('submit'
什么不起作用？
“不工作”不是很有帮助......它有什么作用？你有错误吗？在屏幕上？在开发者工具控制台中？
不是错误控制台，也没有任何功能，只是我想要当用户发布没有刷新页面的显示帖子时
只是为了确认。您是否包含 jquery.js 文件？ :P

标签： javascript php jquery mysql ajax

【解决方案1】：

更改此按钮。既然你想运行一个 AJAX 调用它不应该是一个 SUBMIT。

<button class="btn-ajouter" type="submit" name="ajouter" value="ajouter">ajouter</button>

到这里

<button class="btn-ajouter" id="ajouter" name="ajouter" value="ajouter">ajouter</button>

并从

更改您的 JQuery

$('form').on('submit', function (e) {

到

$('#ajouter').on('click', function (e) {

另外，你不需要 e.preventDefault();

【讨论】：

"既然你想运行一个 AJAX 调用它不应该是一个 SUBMIT" 为什么？
如果您正在进行 AJAX 调用，为什么要触发表单提交然后取消？
是的，一旦你解决了问题就撤回了，这就是 SO 的工作原理。它可以双向工作，如果您不编辑，我将无法撤回；p
@GordonKushner 您的问题也可能会被要求进行表单验证。有一个事件，只需使用它。否则，你为什么还要使用表格？
@SergeK 很公平。作为公司的最佳实践，我们根本不将表单用于仅 AJAX 页面。 YMMV

【解决方案2】：

似乎您正试图在用户提交表单的同一页面上显示信息。我建议您将 php 代码放在 单独的文件 中，然后使用 javascript 将其打印在页面上的某个位置。一个示例代码是这样的：

您当前页面上的 Javascript 代码

<script>
  $(function () {

   // I actually agree with Lawrence Cherone's suggestions here, so i'm including them
   $('form.posting').on('submit', function (e) {

      form_data = $(this).serialize()
      e.preventDefault();

      $.ajax({
        type: 'post',
        url: 'separate.php',
        data: form_data,
        success: function (response) {
          //then you can have the server output as an object
          response = JSON.parse(response);
          //And print it somewhere, for example:
          $('#someDiv').html(response.whatever);
        }
      });

    });

  });
</script>

单独文件中的 php 代码

<?php 

  $stmt = $connect->query('SELECT post FROM publications
                                      ORDER BY date_post DESC ');
  $row = $stmt->fetch();

  echo json_encode($row['post']);

【讨论】：

form 中的<button type="submit" 已经在点击时触发了submit 事件。
嗯。这是正确的。他同时编辑了他的问题。
OPs 代码没问题，不需要切换到$('body').on('click','.btn-ajouter'，而是OP 应该缩小选择器，例如$('form.posting').on('submit',，删除$('form').serialize(), 并从var form_data = $(this).serialize() 外部抓取它ajax 对象。您也使用$('#somewere').html(response);，但现在返回 json.. wtf.
什么#somewere？
OP 改变了他的问题，所以我还在编辑我的回复，没必要急于求成 ;)

【解决方案3】：

更改此表单，

 <form class="posting" method="POST" autocomplete="off" onSubmit="return false">      

    <textarea name="text" id="text" class="textarea" ></textarea>

<button class="btn-ajouter" type="submit" id="ajouter" name="ajouter" value="ajouter">ajouter</button>                           
</form>

Ajax 来了，

    $(function(){
    $("#ajouter").click(function(){
var text=$("#text").val();
$.ajax({
url:"createpost.php",
method:"POST",
data:{text:text},
cache:false,
success:function(data){
$("#result").load(location.href+ "#result");
}
  });
    });
    });

这里是 PHP 和 HTML 代码

<div id="result">
 <?php 

   $stmt = $connect->query('SELECT post FROM publications
                              ORDER BY date_post DESC ');

  while($row=$stmt->fetch() )
  {
 ?>
           <div class="allpost"> 

 <?php 
          echo $row['post'].'<br>' ;
  ?>
           </div>

 <?php 
   }
   ?>

</div>

【讨论】：

$("#result").load(location.href+ "#result");