如何在不使用ajax刷新页面的情况下在提交时加载div？答案

【问题标题】：how to make a div load on submit without refreshing the page using ajax?如何在不使用ajax刷新页面的情况下在提交时加载div？
【发布时间】：2017-01-19 16:44:24
【问题描述】：

这是我运行良好的代码，但每次提交时都必须重新加载。我想在每次点击提交按钮时重新加载comments.php。

我应该用 JavaScript 写什么？

Index.php:

<div class="form-group">
  <form action="" method="post" id="reply" enctype="multipart/form-data"  >
    <div class="input-group">
      <input   type="text" placeholder="say something" class="form-control" name="comment"/>
      <br/>
      <button class="btn btn-info"  type="submit" name="submit">submit</button>
    </div>
  </form>
</div>
 
<?php
  if(isset($_POST['submit'])){
    //php goes here
  }      
?>

<div>
  <?php include("comments.php") ; ?> 
  // i  want  to make this reload on every submit 
</div>

【问题讨论】：

你用谷歌搜索过吗？
如果您不想刷新页面，请先更改 type="button" 而不是 "submit"
Submit a form without refreshing a page using ajaxForm的可能重复
@ppasler 我问如何在提交时加载特定的 div ......我没有问如何在不刷新整个页面的情况下提交表单
@truespeaker 为什么不回复答案却回复 cmets？

标签： javascript php ajax

【解决方案1】：

function myfunc(){
$.ajax({
url:"comments.php",
data:$("input").val(),
method:'post',
success:function(response){
},
error:function(error,message){
}
});

}

<form action="javascript:myfunc()"......>

这是 jquery

【讨论】：

【解决方案2】：

本题使用jquery。如果您不知道，请访问http://jquery.org了解更多信息：

在 cmets.php 周围添加一个 div：

<div id="comments">
  <?php include("comments.php") ; ?> 
</div>

现在您可以捕获提交并将其替换为 ajax 调用+重新加载 cmets：

<script>
 $(document).ready(function(){
  $("#reply").on("submit",function(e){
    e.preventDefault();
    $.ajax();//todo for you. I cannot write this with this rare information
    $("#comments").load("comments.php");//the magic part
    return false;//prevent the real submit
  }):
});
</script>

【讨论】：

【解决方案3】：

你可以使用 jQuery load() 方法。

jQuery load() 方法从服务器加载数据并将返回的 HTML 放入所选元素中。此方法提供了一种从 Web 服务器异步加载数据的简单方法。

load()方法的参数含义如下：

必需的 URL 参数指定您要访问的文件的 URL 加载。
可选数据参数指定一组查询字符串（即键/值对）与请求。
可选的完成参数基本上是一个回调函数请求完成时执行。回调被触发每个选定元素一次。

你的 html ：

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("#box").load("comments.php");
    });
});
</script>
</head>
<body>
    <div id="comments">

    </div>
    <button type="button">Load Comments</button>
</body>
</html>

Comments.php

<?php


    //content here

    echo "I'm loaded";

    ?>

【讨论】：