我正在编写一个脚本来将数据发送到mysql表，并且一切正常，但调用的成功部分，它没有将我的结果加载到我页面上的结果列中。我的代码如下。
有什么建议可以解决这个问题吗？我猜测问题出在我的 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>
最佳答案
问自己的问题...
- jQuery 是否会运行您的成功回调？
- 如果是，响应数据的标记是否格式良好？
首先我会添加一个“调试器；”对您的成功函数的声明(假设您有 Firefox 和 Firebug)。这将使您能够进入脚本控制台并更好地了解正在发生的情况。
调试器语句将导致脚本执行暂停并进入 Firebug 控制台。尝试以下方法
success: function(result){
debugger;
$('#contents').after( "<div>" +result +"</div>" );
}
如果你的脚本击中了这个，我怀疑你的响应标记格式不正确，并且 jQuery 在解析 div 时遇到问题，但你可以在 firebug 中的断点处检查所有这些。
调试中另一个容易检查和忽略的事情是
让我知道你过得怎么样。
关于javascript - 不打印 AJAX 的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/384157/