如何使用jQuery使用Ajax提交表單，然後獲取它提交的頁面的輸出？

我正在學習PHP和JavaScript，並且正在構建一個博客平臺。我正在評論系統上工作。我想檢查名稱字段是否與數據庫中的任何用戶相匹配，如果有，那麼我想顯示一條消息，指出該名稱已被採用。如何使用jQuery使用Ajax提交表單，然後獲取它提交的頁面的輸出？

下面是包含表單的頁面。（fullpost.php）

<!DOCTYPE html> 
<html> 

<?php 
include ('functions.php'); 
connectDB(); 

$id = $_GET['id']; 

$result = queryDB('SELECT * FROM posts WHERE id='.$id); 

$post = mysql_fetch_array($result); 
?> 

<head> 
    <title><?php echo $post['title']; ?> - SimpleBlog</title> 
    <link rel="stylesheet" href="style.css" /> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
    <script src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $(".commentform").validate(); 


      }); 
    </script> 

</head> 

<body> 
<div id="header"> 
<a href="index.php">SimpleBlog</a> 
</div> 
<div id="wrapper"> 
<?php 
//post found, display it 
if (mysql_num_rows($result) >0) { 
     echo '<div class="post">'; 
     echo '<div class="postheader">'; 
     echo '<h1>'.$post['title'].'</h1>'; 
     echo '<h5>by '.$post['author'].' at '.$post['date'].' in '.$post['category'].'</h5>'; 
     echo '</div>'; 
     echo '<p>'.$post['fullpost'].'</p>'; 
     echo '</div>'; 

    //display comments form 
?> 
    <div id="commentform"> 
     <form action="commentsubmit.php" method="POST" class="commentform"/> 
      <?php 
      //if not logged in, display a name field 
      if (!loggedIn()) { 
       echo '<label for="author">Name: </label><br />'; 
       echo '<input type="text" name="author" class="required"/><br />'; 
      } 
      ?> 
      <label for="comment">Comment: </label><br /> 
      <textarea type="text" name="comment" class="required"></textarea><br /> 
      <input type="hidden" value="<?php echo $id; ?>" name="postid"/> 
      <input type="submit" name="submit" Value="Submit" id="sendbutton" class="button"/> 
     </form> 
    </div> 
<?php 
} 
else { 
    //no posts found 
    echo "That post doesn't exist!"; 
} 

$result = queryDB('SELECT * FROM comments WHERE postid='.$id.' ORDER BY date DESC'); 
$numcomments = mysql_num_rows($result); 

//comments found, display them 
if (mysql_num_rows($result) >0) { 
    if (mysql_num_rows($result) == 1) { 
     echo '<h5>'.$numcomments.' Comment:</h5>'; 
    } 
    if (mysql_num_rows($result) > 1) { 
     echo '<h5>'.$numcomments.' Comments:</h5>'; 
    } 
    while($comment = mysql_fetch_array($result)) { 
     echo '<h6> by '.$comment['author'].' on '.$comment['date'].'</h6>'; 
     echo '<p>'.$comment['text'].'</p>'; 
    }  
} 
else { 
    //no comments found 
    echo '<h4>No comments</h4>'; 
} 
?> 

</div> 
</body> 
</html>

這是它提交給它的頁面。（commentnew.php）

<?php 
//creates a new comment 

include('functions.php'); 

//form submitted 
if (isset($_POST['submit'])) { 

    //set $author if not logged in 
    if(!loggedIn()) { 
     //check if username is taken 
     connectDB(); 
     $result = queryDB("SELECT * FROM users WHERE username='".$_POST['author']."'"); 
     if (mysql_num_rows($result) > 0) { 
      die('That name is taken!'); 
     } 
     else { 
      //username is not taken 
      $author = mysql_real_escape_string($_POST['author']); 
     } 
    } 
    else { 
     //user is logged in, set author to their username 
     $author = $_SESSION['username']; 
    } 

    //$author is set, submit 
    if (!empty($author)) { 
     $postid = mysql_real_escape_string($_POST['postid']); 
     $comment = mysql_real_escape_string($_POST['comment']); 
     $date = mysql_real_escape_string(date("Y-m-d")." ".date("H:i:s")); 

     queryDB('INSERT INTO comments (postid,date,author,text) VALUES ("'.$postid.'","'.$date.'","'.$author.'","'.$comment.'")'); 
     echo 'Comment Sent!'; 
    } 
} 
?>

我試過在腳本標記中使用$ .ajax，但它似乎什麼都不做。我可以得到一個如何正確使用它的例子嗎？我如何獲得它從commentnew.php拉動消息？我是否會以錯誤的方式檢查用戶名？我應該以某種方式使用jQuery的驗證插件嗎？

來源

2011-08-05 Mason

使用FF + Firebug。打開NET選項卡，查看您的AJAX請求發生了什麼。 –

試試這個

$("form.commentform").submit(function(e){ 
    e.preventDefault(); 

    $.post({ 
    url: $(this).attr('action'), 
    data: $(this).serialize(), 
    success: function(reponse){ 
     //here response will contain whatever you send from the server side page 
    } 
    }); 
}):

來源

2011-08-05 18:08:42 ShankarSangoli

我應該把它放在$（document）.ready的頭部嗎？當我這樣做時，它會使驗證插件無效，並且不會使用ajax進行發送。 – Mason

只要把它放在準備好的方法中就可以了。 – ShankarSangoli

一般

：

var form = $("form.commentform"); 
$.post(form.attr('action') , form.serialize(), function(data) { 
    alert("Response: " + data); 
});

來源

2011-08-05 18:09:06

查找到jQuery的AJAX功能。這就是我使用的。 http://api.jquery.com/jQuery.ajax/

來源

2011-08-05 18:10:16

如何使用jQuery使用Ajax提交表單，然後獲取它提交的頁面的輸出？

回答

相關問題