jquery - How does "Add Comment" javascriptAJAX work on stackoverflow? - Stack Overflow

admin管理员组

文章数量:1425161

I was just looking at the code in firebug and I can't follow it. I can't figure out how clicking "add ment" calls the jquery function that shows the ment form. On my site I am trying to mimic this behavior. I have a registration form and I want a link such as "Fill in my data" which then displays a text input below the link where they enter a code, and then a submit button that through AJAX populates the fields. I am new to js and AJAX, but am a quick learner so I was hoping to get some clarity here on the details of implementation. Seems to me the displaying of the input field should not be AJAX, but just js. And then submit would trigger the AJAX function. I know AJAX is fairly involved, in terms of having to create an xml that describes the server side data that needs to be collected and then somehow submit button will trigger call to server side php script or something. Conceptually I understand, but mechanically I don't... Thanks! Brian

I just tried implementing as described, but the url is not triggering the js. Here is what I have:

<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>

Because my site already loads jquery I didn't add the script declaration for jquery. Is anything above obviously wrong? Thanks.

I was just looking at the code in firebug and I can't follow it. I can't figure out how clicking "add ment" calls the jquery function that shows the ment form. On my site I am trying to mimic this behavior. I have a registration form and I want a link such as "Fill in my data" which then displays a text input below the link where they enter a code, and then a submit button that through AJAX populates the fields. I am new to js and AJAX, but am a quick learner so I was hoping to get some clarity here on the details of implementation. Seems to me the displaying of the input field should not be AJAX, but just js. And then submit would trigger the AJAX function. I know AJAX is fairly involved, in terms of having to create an xml that describes the server side data that needs to be collected and then somehow submit button will trigger call to server side php script or something. Conceptually I understand, but mechanically I don't... Thanks! Brian

I just tried implementing as described, but the url is not triggering the js. Here is what I have:

<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>

Because my site already loads jquery I didn't add the script declaration for jquery. Is anything above obviously wrong? Thanks.

• javascript
• jquery
• ajax

Share Improve this question Follow edited Apr 11, 2015 at 14:32 Brian asked Apr 11, 2015 at 10:31 BrianBrian 12522 silver badges1616 bronze badges 1

• You probably could have worked this out with Firebug (or another in-browser debug app). – ggdx Commented Apr 11, 2015 at 11:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Here in StackOverflow, the form is already present, but hidden initially (to save valuable space).
(StackOverflow uses a .dno class to hide elements.)

The click on the add a ment button does simply:

• hide the clicked add a ment button
• show the DIV holding the form

A simple way to do it:

$(function(){

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

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

});

.dno{display:none;}

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

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

Regarding the $.ajax

since by submitting the form we don't want the page to refresh, AJAX is used to POST data to a PHP (let'ssay: saveComment.php page) which than stores to database. AJAX returns than a message response from the PHP code:

$.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 
  }
});

The PHP stuff

in the code above AJAX will POST a serialized data to PHP like:

ment=Please, show what you tried!

The saveComment.php than might look like:

<?php

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



$response = "";

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

above, whatever you put in the echo, it will be returned by AJAX into the response argument.

本文标签： jqueryHow does quotAdd Commentquot javascriptAJAX work on stackoverflowStack Overflow