Question

我正在编写一个脚本来将数据发送到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>

Answer 1

问自己的问题......

jQuery甚至可以运行你的成功回调吗？
如果是，那么响应数据是否形成良好的标记？

首先，我要添加一个“调试器”;声明你的成功函数（假设你有firefox和firebug）。这将使您能够进入脚本控制台并更好地了解正在发生的事情。

调试器语句将导致脚本执行暂停并进入firebug控制台。请尝试以下

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

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

在调试中检查和解除的另一个简单方法是

您的Web服务器是否提供有效（状态200）响应（检查firebug中的控制台或网络选项卡以查看此信息，或者如果在ie中运行则使用类似fiddler的信息）

让我知道你是怎么过的。

Answer 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>" );
                        }
                });

不打印AJAX的结果

2 个答案: