Не печатать результаты из AJAX

Я работаю над сценарием для отправки данных в таблицу 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>

javascript jquery ajax

21.12.2008 08:58

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

3 227

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Возможно, вы получаете сообщение об ошибке, попробуйте добавить оператор отладки к вашему вызову 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>" );
                        }
                });

Я добавил это, и все равно ничего, ничего не появилось. Я сохраню эту часть ошибки под рукой для будущих проектов. Райан

— 21.12.2008 09:13

21.12.2008 09:05

Ответ принят как подходящий

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

Выполняет ли jQuery ваш обратный вызов успеха?
Если да, правильно ли сформирована разметка данных ответа?

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

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

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

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

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

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

Дай мне знать, как у тебя дела.

21.12.2008 10:57