无需重新加载页面即可提交和显示记录

Question

我有一个表单，它将数据提交到表格中并将它们显示在同一页面上。 但它重新加载页面。

我想在不重新加载页面的情况下提交和显示数据。 我已经阅读了很多 AJAX 脚本。 但我很困惑。

有人可以帮忙吗？

<form action="viewblog.php" method="post"> 
<h3 class="contact_title">Leave a Comment</h3> 
<div class="contact_form">
<div class="row">
<div class="large-4 columns">
<input type="text" name="name" placeholder="Name" />
</div>
<div class="large-12 columns">    
 <textarea cols="10" rows="15" name="comment" placeholder="Comment"></textarea> 
</div>
<div class="small-4 columns">
<input type="submit" name="submit" class="button right" value="Add a comment" />
</div>    
</div>    
</div>    
</form>    

 <?php


if(isset($_POST["submit"])) 
{   
require"connection.php";

extract($_POST);


extract($_REQUEST);


mysql_query("insert into comment values('','',Now(),'$name','$comment')") or die 


(mysql_error());


echo"Comment Inserted Succesfully !";


}


?> 




 <?php



  include('connection.php');


     extract($_REQUEST);


$sql = "SELECT * FROM enteries;";


$result = mysql_query($sql);


while($row1=mysql_fetch_array($result))


            {


                extract($row1);

?> 


<div class="comments">


                    <ol class="comment_list">




                        <!--comment item-->


                        <li class="com_item">


                            <div class="com_main">


                                <div class="com_content">


                                    <div class="com_meta">


                                        <span class="user_name"><a href="#"><?
php echo $name;  ?></a></span>


<span class="com_date"><?php echo date("D jS F Y ", strtotime($dateposted))  ?>

</span>

                                    </div>


                                    <p class="com_text"><?php echo $comment;  ?>
</p>

                                </div>

                            </div>

                        </li>

                    </ol>

                </div>

                <?php


            }


                ?>

Answer 1

PHP 在服务器端执行，所以直接编写 PHP 和 HTML 组合不会在不重新加载的情况下调用。

你需要JavaScript来做 AJAX 调用。 您可以使用 jQuery 或 JavaScript 或任何其他库。

此链接将教您有关 AJAX 的基础知识。

Answer 2

<form> 
    <h3 class="contact_title">Leave a Comment</h3> 
    <div class="contact_form">
        <div class="row">
            <div class="large-4 columns">
                <input type="text" name="name" id='name' placeholder="Name" />
            </div>
            <div class="large-12 columns">    
                <textarea cols="10" rows="15" id='comment' name="comment" placeholder="Comment"></textarea> 
            </div>
            <div class="small-4 columns">
                <input type="submit" name="submit" id='submit' class="button right" value="Add a comment" />
            </div>    
        </div>    
    </div>    
</form>    
<script>
$('#submit').click(function()
{
    var name = $("#name").val();
    var comment = $("#comment").val();
    var dataString = 'name='+ name + '&comment='+ comment;
        $.ajax({
        url: viewblog.php,
        type:'POST',
        data:dataString,
        cache:false,
        success: function(result)
        {
            alert(result);
        }               
        });
});</script>

查看博客.php

<?
$name=$_POST['name'];
$comment=$_POST['comment'];

$query="INSERT INTO TableName SET NameColumnName='$name', CommentColumnName='$comment'";

//Execute Query Here.. 

echo "Comment Submitted Succesfully";

?>