Pas d'impression des résultats de AJAX

Je travaille sur un script pour envoyer des données à une table mysql et je l'ai tout fonctionne correctement mais la partie de succès de l'appel, il ne charge pas mes résultats dans ma colonne de résultats sur ma page . Mon code est ci-dessous.Pas d'impression des résultats de AJAX

Des suggestions sur ce que je peux faire pour résoudre ce problème? Je devine que le problème est dans mon "succès:" option dans mon appel AJAX.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Facebook like ajax post - jQuery - ryancoughlin.com</title> 
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" /> 
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" /> 
<!--[if IE]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection"><![endif]--> 
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript"> 
/* <![CDATA[ */ 
$(document).ready(function(){ 

    $('p.validate').hide(); 

    $.getJSON("readJSON.php",function(data){ 
     $.each(data.posts, function(i,post){ 
      content = '<div id="post-'+ post.id +'">\n'; 
      content += '<h3>' + post.author + '</h3>\n'; 
      content += '<p class="small quiet">' + post.date_added + '</p>\n'; 
      content += '<p>' + post.post_content + '</p>'; 
      content += '<hr/>'; 
      $("#contents").append(content).fadeIn("slow");  
     }); 
    }); 
    $(".reload").click(function() { 
     $("#posts").empty(); 
    }); 

    $("#add_post").submit(function() { 
     $('p.validate').empty(); 
     // we want to store the values from the form input box, then send via ajax below 
     var author = $('#author').attr('value'); 
     var post = $('#post').attr('value'); 

     if(($('#author').val() == "") && ($('#post').val() == "")){ 
      $("p.validate").fadeIn().append("Both fields are required."); 
      $('#author,#post').fadeIn().addClass("error"); 
     }else{ 
      $.ajax({ 
       type: "POST", 
       url: "ajax.php", 
       data: "author="+ author + "&post=" + post, 
       success: function(result){ 
        $('#contents').after("<div>" +result +"</div>"); 
       } 
      }); 

     } 
     return false; 
    }); 

}); 
/* ]]> */ 
</script> 
<style type="text/css"> 
h3{margin:10px 0;} 
p{margin:5px 0;} 
#posts{display:none;} 
</style> 
</head> 
<body> 
     <div class="container"> 
       <div class="span-24"> 
         <div id="post-container" class="span-9 colborder"> 
           <h2>Posts loaded via Ajax:</h2> 
           <div id="contents"></div> 
         </div> 
         <div id="form" class="span-11"> 
          <h2>New Post:</h2> 

          <form name="add_post" id="add_post" action=""> 
           <label>Author:</label><br /> 
           <input type="text" name="author" id="author" size="15" class="text" /><br /> 
           <label>Post:</label><br /> 
           <textarea name="post" id="post" rows="5" cols="5" class="text"></textarea><br /> 
           <input type="submit" value="Post" id="submit" /><br /> 
          </form><br /> 
          <p class="validate error"></p> 

         </div> 
       </div> 
       <div class="span-24"> 
        <a href="#" class="reload">Reload</a> 
       </div> 
     </div> 
</body> 
</html>

Source

2008-12-21 Coughlin

questions à vous poser ...

Est-ce que jQuery fonctionne même votre rappel de succès?
Si oui, les données de réponse sont-elles correctement balisées?

Pour commencer, je voudrais ajouter un "débogueur;" déclaration à votre fonction de succès (en supposant que vous avez firefox et firebug). Cela vous permettra d'entrer dans la console de script et de mieux comprendre ce qui se passe. L'instruction du débogueur provoque l'exécution de l'exécution du script pour faire une pause et percer dans la console Firebug. Effectuez les opérations suivantes

success: function(result){ 
      debugger; 
      $('#contents').after("<div>" +result +"</div>"); 
      }

Si votre script frappe cela, je soupçonne que votre balisage de réponse est pas bien formé et jQuery a des problèmes d'analyse syntaxique dans la div mais vous pouvez vérifier tout cela lorsque votre à ce point d'arrêt dans Firebug.

Une autre chose facile à vérifier et rejeter dans votre mise au point est

Votre serveur web servir une réponse valide (état 200) (cocher la console ou l'onglet net Firebug pour voir, ou utiliser les goûts de fiddler si je cours dedans ie)

Dites-moi comment vous en êtes.

Source

2008-12-21 07:57:19 redsquare

Vous pourriez obtenir un essai d'erreur ajoutant une instruction de débogage à votre appel ajax en utilisant l'erreur de réglage

$.ajax({ 
         type: "POST", 
         url: "ajax.php", 
         data: "author="+ author + "&post=" + post, 

         error: function(XMLHttpRequest, textStatus, errorThrown) 
         { alert(errorThrown); }, 

         success: function(result){ 
         $('#contents').after("<div>" +result +"</div>"); 
         } 
       });

Source

2008-12-21 06:05:08 bendewey

J'ai ajouté cela et toujours rien, rien n'a surgi. Je garderai cette erreur à portée de main pour les futurs projets. Ryan – Coughlin

Pas d'impression des résultats de AJAX

Répondre

Questions connexes