Javascript 刷新post用户而不刷新页面ajax不工作

我不知道，不工作

-我有一个供用户使用的桌柱

• 我想显示后没有刷新页面使用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存在于页面索引中）（）

$（函数（）{
$（'form'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
$.ajax({
键入：“post”，
url:'createpost.php'，
数据：$（'form'）。序列化（），
成功：函数（）{
警报（“表格已提交”）；
}
});
});
});

---

-但是不工作

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

当前页面上的Javascript代码

$（函数（）{
//我实际上同意劳伦斯·切隆的建议，所以我把它们包括在内
$（'form.posting'）。关于（'submit'，函数（e）{
form_data=$（this）.serialize（）
e、 预防默认值（）；
$.ajax({
键入：“post”，
url:'separate.php'，
数据：表格数据，
成功：功能（响应）{
//然后可以将服务器输出作为对象
response=JSON.parse（response）；
//然后打印到某个地方，例如：
$（'#someDiv'）.html（response.whatever）；
}
});
});
});

php代码位于单独的文件中

---

更改此按钮。因为您想要运行AJAX调用，所以它不应该是SUBMIT

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

到

此外，您不需要e.preventDefault（）
 更改此表单

 <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> 

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>


编辑抱歉$（'form'）。在（'submit'what not working？'not working'不是很有帮助…它是做什么的？你有错误吗？在屏幕上？在开发者工具控制台中？没有错误控制台，也没有任何功能，只是我想当用户发布显示帖子时没有刷新页面只是为了确认。你包括jquery.js文件了吗？：p
Hmm。对。他同时编辑了他的问题。OPs代码很好，无需切换到
$（'body'）。在（'click'，'.btn ajouter'
）上，OP应该缩小选择器的范围，例如
$（'form.posting'）。在（'submit'，
）上，删除
$（'form'）。序列化（），
并从
var form_data=$（this.）获取它。在ajax对象外部序列化（）
。您也可以使用
$（'someare'））.html（response）；
但现在返回json..wtf.somewere是什么？OP改变了他的问题，所以我仍在编辑我的回答，不必着急dude；）“既然你想运行AJAX调用，就不应该是提交”为什么？如果您正在进行AJAX调用，为什么要触发表单提交，然后取消？是的，一旦您解决了问题，就会撤回，这就是为什么。它是双向工作的，如果您不进行编辑，我将无法撤回；p@GordonKushner您的问题也可能被要求进行表单验证。有一个事件，请使用它。其他e、 你为什么要使用表单？@SergeK很公平。作为公司的最佳实践，我们根本不为仅AJAX页面使用表单。YMMV$（“#结果”）.load（location.href+“#结果”）；
<button class="btn-ajouter" type="submit" name="ajouter" value="ajouter">ajouter</button>

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

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

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

 <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> 

    $(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");
}
  });
    });
    });

<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>