Javascript 不打印来自AJAX的结果_Javascript_Jquery_Ajax

Javascript 不打印来自AJAX的结果

javascript jquery ajax

Javascript 不打印来自AJAX的结果,javascript,jquery,ajax,Javascript,Jquery,Ajax,我正在编写一个将数据发送到mysql表的脚本，我已经让它正常工作了，但是调用的成功部分并没有将我的结果加载到我页面上的“结果”列中。我的代码如下我能做些什么来解决这个问题，有什么建议吗？我猜问题出在我的AJAX调用中的“success:”选项中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

我正在编写一个将数据发送到mysql表的脚本，我已经让它正常工作了，但是调用的成功部分并没有将我的结果加载到我页面上的“结果”列中。我的代码如下

我能做些什么来解决这个问题，有什么建议吗？我猜问题出在我的AJAX调用中的“success:”选项中

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


类似Facebook的ajax post-jQuery-ryancoughlin.com
/*  */
h3{边距：10px 0；}
p{margin:5px0；}
#帖子{显示：无；}
通过Ajax加载的帖子：
新员额：
作者：



帖子：

您可能会遇到错误，请尝试使用错误设置将调试语句添加到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>" );
                        }
                });

$.ajax({
类型：“POST”，
url:“ajax.php”，
数据：“author=“+author+”&post=“+post，
错误：函数（XMLHttpRequest、textStatus、errorshown）
{警报（错误抛出）；}，
成功：功能（结果）{
$（'#contents'）。在（“+result+”）之后；
}
});

您可能会遇到错误，请尝试使用错误设置将调试语句添加到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>" );
                        }
                });

$.ajax({
类型：“POST”，
url:“ajax.php”，
数据：“author=“+author+”&post=“+post，
错误：函数（XMLHttpRequest、textStatus、errorshown）
{警报（错误抛出）；}，
成功：功能（结果）{
$（'#contents'）。在（“+result+”）之后；
}
});

要问自己的问题

jQuery是否运行了成功回调

如果是，响应数据的格式是否正确首先，我将在success函数中添加一个“debugger；”语句（假设您有firefox和firebug）。这将使您能够进入脚本控制台，更好地了解正在发生的事情

调试器语句将导致脚本执行暂停并进入firebug控制台。试试下面的方法

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

成功：函数（结果）{
调试器；
$（'#contents'）。在（“+result+”）之后；
}

如果您的脚本遇到了这个问题，我怀疑您的响应标记格式不正确，jQuery在解析到div时遇到了问题，但是您可以在firebug的断点处检查所有这些

在调试过程中，另一件容易检查和排除的事情是

您的web服务器是否提供有效（状态200）响应（检查firebug中的console或net选项卡以查看此信息，或者在ie中运行时使用类似fiddler的功能）

让我知道你进展如何。

问你自己的问题