Не печатать результаты от AJAX - PullRequest
1 голос
/ 21 декабря 2008

Я работаю над сценарием для отправки данных в таблицу mysql, и у меня все это работает должным образом, но часть вызова успешно не загружает мои результаты в столбец результатов на моей странице. Мой код ниже.

Любые предложения о том, что я могу сделать, чтобы это исправить? Я предполагаю, что проблема в моей опции "success:" в моем вызове 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>

Ответы [ 2 ]

1 голос
/ 21 декабря 2008

Вопросы, которые нужно задать себе ...

  1. jQuery даже запускает ваш успешный обратный вызов?
  2. Если да, правильно ли размечены данные ответа?

Для начала я бы добавил "отладчик"; Заявление о вашей функции успеха (при условии, что у вас есть Firefox и Firebug). Это позволит вам проникнуть в консоль сценария и лучше понять, что происходит.

Оператор debugger приведет к приостановке выполнения скрипта и остановке в консоли firebug. Попробуйте следующее

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

Если ваш скрипт срабатывает, я подозреваю, что разметка вашего ответа сформирована неправильно, и у jQuery возникают проблемы с синтаксическим анализом в div, но вы можете проверить все это, когда ваша точка останова находится в firebug.

Еще одна простая вещь, которую можно проверить и отклонить при отладке, -

  1. обслуживает ли ваш веб-сервер правильный (статус 200) ответ (проверьте это на вкладке консоли или сети в Firebug, чтобы увидеть это, или используйте подобные fiddler, если он работает в ie)

Дайте мне знать, как вы поживаете.

0 голосов
/ 21 декабря 2008

Возможно, вы получаете сообщение об ошибке, попробуйте добавить оператор отладки в ваш вызов ajax, используя параметр ошибки

$.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>" );
                        }
                });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...