怎么做＆＃34;添加评论＆＃34; javascript / AJAX在stackoverflow上工作？

Question

我只是在查看firebug中的代码，但我无法遵循它。我无法弄清楚如何点击＆＃34;添加评论＆＃34;调用显示评论表单的jquery函数。在我的网站上，我试图模仿这种行为。我有一个注册表单，我想要一个链接，例如＆＃34;填写我的数据＆＃34;然后在输入代码的链接下方显示文本输入，然后通过AJAX填充字段的提交按钮。我是js和AJAX的新手，但我是一个快速学习者，所以我希望在实施细节上有一些清晰度。在我看来，输入字段的显示不应该是AJAX，而只是js。然后提交将触发AJAX功能。我知道AJAX相当复杂，在必须创建描述需要收集的服务器端数据的xml方面，然后以某种方式提交按钮将触发对服务器端php script的调用或者其他的东西。从概念上讲，我理解，但机械地，我不...谢谢！布赖恩

我刚刚尝试按照描述实现，但是url没有触发js。这就是我所拥有的：

<script type="text/javascript">
$(function(){
$(".previousreg-link").on("click", function( event ){
event.preventDefault();                // Prevents browser following #hash 
$(this).hide();                        // hide the button
$(".previousreg-form-container").show();   // Show the form parent
});

$(".previousreg-form-container form").on("submit", function( event ){
  event.preventDefault();              // Don't send headers
  alert( $(this).serialize() +"\nWILL BE SENT TO PHP" );
 // $.ajax stuff
 });

 });
 </script>

 <a href=# class=previousreg-link>Use previous registration data</a>
 <div class="previousreg-form-container dno">
 <form>
 <textarea name=previousreg></textarea>
 <input type=submit>
 </form>
 </div>

因为我的网站已经加载了jquery，所以我没有为jquery添加脚本声明。有什么明显错误吗？感谢。

Answer 1

在StackOverflow中，表单已经存在，但最初隐藏（以节省宝贵的空间）。
（StackOverflow使用.dno类来隐藏元素。）

点击add a comment按钮就可以了：

• 隐藏点击的add a comment按钮
• 显示持有form
的DIV

一种简单的方法：

＆＃13;

＆＃13;

$(function(){

  $(".comments-link").on("click", function( event ){
    event.preventDefault();                // Prevents browser following #hash 
    $(this).hide();                        // hide the button
    $(".comment-form-container").show();   // Show the form parent
  });

  $(".comment-form-container form").on("submit", function( event ){
      event.preventDefault();              // Don't send headers
      alert( $(this).serialize() +"\nWILL BE SENT TO PHP" );
     // $.ajax stuff
  });

});

＆＃13;

.dno{display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href=# class=comments-link>add a comment</a>
<div class="comment-form-container dno">
  <form>
    <textarea name=comment></textarea>
    <input type=submit>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

关于$.ajax

因为通过提交表单我们不希望页面刷新，所以AJAX用于POST数据到PHP（让我们看看：saveComment.php页面）比商店更多到数据库。从PHP代码返回AJAX消息 响应 ：

$.ajax({
  type    : "POST",
  url     : "saveComment.php",
  data    : $(this).serialize(),      // `this` is our form
  success : function( response ) {    // Response is the PHP echo
    alert("PHP says: "+ response);
    // Using jQuery append the message to 
  }
});

PHP的东西

在上面的代码中，AJAX会将序列化数据发布到PHP，如：

comment=Please, show what you tried!

saveComment.php可能看起来像：

<?php

if ($_SERVER['REQUEST_METHOD'] != 'POST') exit; // Don't allow anything but POST



$response = "";

if ( isset($_POST["comment"]) ) { 
     $commment = htmlspecialchars( $_POST["comment"] );
  // TODO: $userId = retrieve here the user ID from the session;
  // Sanitize(!!!!!) and save to database $comment and $userId
     $response = $commment;     
} else {
     $response = "Please, enter a comment";
}
echo $response;  // This will be sent/returned to AJAX
exit;

以上，无论你放在echo中，它都会被AJAX返回到response参数中。