ajax表单打开但不更新

时间:2012-08-13 07:19:39

标签: php jquery

我正在将表单加载到页面并加载到div中,如下所示:

<script type="text/javascript">
$('#comments').load('/pages/includes/comments.php', { user:"<?=$user?>", id:"<?=$id?>"
});
</script>

页面加载正常并且系统中的任何注释都显示但是当我尝试添加新注释时它根本就不起作用,下面的comments.php(如果我'包含'文件而不是ajax它工作得很好btw):< / p>

require '/home/php_/lib/dbconnect.inc';

$comments_id = mysql_real_escape_string($_POST['comments_id']);
$comments = mysql_real_escape_string($_POST['comments']);
$id = mysql_real_escape_string($_POST['id']);

/*******************************************************/
/****************** add item
/*******************************************************/

if ($_POST[additem] == '1'){ // AA

    $additem = mysql_query("
    insert into comments (
    id,
    user_id,
    comments
     )
    VALUES (
    '$id',
    '$user',
    '$comments'
    )",$db);

    if(!$additem) { echo "input error ".mysql_error(); exit; } // debug

} // close AA

/*******************************************************/
/****************** end add item
/*******************************************************/


$coms = mysql_query("select * from comments where id = '$id';",$db);
if(!$coms) { echo "coms error ".mysql_error(); exit; } // debug

if (mysql_num_rows($coms)>0){ // 55

    while($databack44 = mysql_fetch_array($coms)){ // 55

    echo '<div style="width:100%; float:left;">'.$databack44[comments].'</div>';

        } 

        } // 55

        else {  

        echo 'No Comments';

        }

?>      

<form method="post" action="#">
    <textarea name="comments"></textarea>
    <input type="submit" value="Add" class="button green">
    <input type="hidden" name="id" value="<?=$id?>">
    <input type="hidden" name="additem" value="1">
    </form>

2 个答案:

答案 0 :(得分:2)

这是因为一旦你提交了新的评论,它将作为一个表单提交,它不像AJAX那样工作。

最简单的方法是使用单独的php文件来保存评论和jquery form插件 将其添加到 comment.php

中的<HEAD>标记
<HEAD>
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                location.reload(); 
            }); 
        }); 
    </script> 
</HEAD>
<?php 
$coms = mysql_query("select * from comments where id = '$id';",$db);
if(!$coms) { echo "coms error ".mysql_error(); exit; } // debug

if (mysql_num_rows($coms)>0){ // 55

    while($databack44 = mysql_fetch_array($coms)){ // 55

    echo '<div style="width:100%; float:left;">'.$databack44[comments].'</div>';

        } 

        } // 55

        else {  

        echo 'No Comments';

        }


?>
<form method="post" action="function.php" id="myForm">
    <textarea name="comments"></textarea>
    <input type="submit" value="Add" class="button green">
    <input type="hidden" name="id" value="<?=$id?>">
    <input type="hidden" name="additem" value="1">
    </form>

<强> function.php

if ($_POST[additem] == '1'){ // AA

    $additem = mysql_query("
    insert into comments (
    id,
    user_id,
    comments
     )
    VALUES (
    '$id',
    '$user',
    '$comments'
    )",$db);

    if(!$additem) { echo "input error ".mysql_error(); exit; } // debug

} // close AA

jquery表单插件正在禁用标准表单提交功能,并将表单数据作为ajax变量发送到给定的表单操作URL

将数据发送到 function.php 后, comment.php 将由location.reload()重新加载。

现在您有了新评论 希望这有帮助

答案 1 :(得分:0)

嘿达伦很乐意帮助你...

好的,这是另一种方法。 我们需要3页。

  1. comment.php
  2. function.php
  3. comment.js
  4. <强> comment.php

        <HEAD>
        <script>
                var id="<?php echo $_GET['id']?>"; 
                // wait for the DOM to be loaded 
                $(document).ready(function() { 
                //loading comments on page loading
                  view_comment(id);
                    }); 
                }); 
            </script> 
        </HEAD>
    
    <div id="display_div"></div>
    <form name="f1">
        <textarea name="comments" id="comments"></textarea>
        <input type="hidden" name="id" value="<?=$id?>">
        <input type="hidden" name="additem" value="1">
        <input type="button" value="Add" class="button green" onClick="javascript:add_comment(f1.id.value,f1.additem.value,f1.comments.value)">    
        </form>
    

    <强> function.php

    <?php
        //view comments
        if($_GET['action']=="view_comment"){
        $coms = mysql_query("select * from comments where id = '$id';",$db);
        if(!$coms) { echo "coms error ".mysql_error(); exit; } // debug
    
        if (mysql_num_rows($coms)>0){ // 55
    
            while($databack44 = mysql_fetch_array($coms)){ // 55
    
            echo '<div style="width:100%; float:left;">'.$databack44[comments].'</div>';
    
                } 
    
                } // 55
    
                else {  
    
                echo 'No Comments';
    
                }
    
    
        }
    
        //add comments
        if($_POST['additem']=="1"){
    $id=$_POST['id'];
    $comments=$_POST['comment'];
         $additem = mysql_query("
            insert into comments (
            id,
            user_id,
            comments
             )
            VALUES (
            '$id',
            '$user',
            '$comments'
            )",$db);
    
            if(!$additem) { echo "input error ".mysql_error(); exit; }
    
        }
    ?>
    

    <强> comment.js

    function view_comment(id){
    $("#display_div").empty().html('<img src="pathtoaloadingimage" />');
       $("#display_div").load("pathtoyourfile/function.php?action=view_comment&id="+id).fadeOut('slow').hide().fadeIn('slow');
    
    }
    
    function add_comment(id,additem,comment){
        if(comment!=""){
     $("#display_div").empty().html('<img src="pathtoaloadingimage" />');
        $.ajax({
      type: "POST",
      url: "http://pathtoyourfile/function.php",
      data: "id="+id+"&additem="+additem+"&comment="+comment});
      $("#comments").val('');
      view_comment(id); 
        }else{
             alert('Comment is empty..! Please write something to comment.');
            return false; 
            }
    
    
    }
    

    现在我们开始有一个AJAX评论页面

    注意: - 向您的网站添加一个加载图片并使用该路径pathtoaloadingimage然后它会使您的网站看起来更好。一旦您提交了新评论,将显示加载图片并在显示您的新网站后在同一点评论。没有重新加载

    希望这有助于你