我有一个HTML/JQuery前端。我想我的HTML页面有一个链接,当点击帖子数据到一个php文件和解码JSON响应应该打印到文档窗口。
编辑:这是我更新的HTML/JQuery代码基于@Kyle的回答:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
a.test { font-weight: bold; }
</style>
</head>
<body>
<a href="">display message</a>
<script src="jQuery/jQuery.js"></script>
<script>
$(document).ready(function(){
$(function(){
$("a").click(function(e){
e.preventDefault();
getmessage = "Yes";
getmessage = encodeURIComponent(getmessage);//url encodes data
$.ajax({
type: "POST",
url: "http://dev.speechlink.co.uk/David/test.php",
data: {'getmessage': getmessage},
dataType: "json",
success: function(data) {
json = $.parseJSON(data);
$("#message_ajax").html("<div class='successMessage'>" + json.message + "</div>");
}
});
});
});
});
</script>
<div id = "message_ajax"></div>
</body>
</html>
test.php
<?php
if(isset($_POST['getmessage'])){
$dbh = connect();
$message = mysql_real_escape_string($_POST['message']);
$query = mysql_query("SELECT message FROM messages WHERE id = '46'") or die(json_encode(array('message' => "didn't query"));
if($query){
echo json_encode(array('message' => 'Successfully Submitted Data'));
}else{
echo json_encode(array('message' => 'Error Submitting Data'));
}
mysql_close();
}
?>
后端设置良好…所以我知道问题不在这里。我认为这是一个语法问题代表我,但我不能为我的生命得到div显示响应。我已经试了几个小时了。我认为潜在的许多问题之一是,我没有张贴'getmessage'正确在我的jQuery函数…我是一个jQuery新手,这可能回答了你的大多数问题…
编辑:使用上述代码,我设法在按下链接后将以下内容写入文档窗口:[Object object]
我的问题是如何让它在JSON结尾的PHP响应中打印实际值。
除了已经提到的事情之外,您的PHP脚本不返回有效的JSON也可能是一个问题。它只输出
Successfully Submitted Data
到非JSON的页面。试一试:
echo json_encode(array('message' => 'Successfully Submitted Data'));
ajax请求中的dataString变量为空。您从未将其设置为代码中的任何内容。另外,非jquery对象不支持。serialize方法。你应该使用encodeuriccomponent方法。
试试这个:
<script>
$(document).ready(function(){
$(function(){
$("a").click(function(e){
e.preventDefault();
getmessage = "Yes";
getmessage = encodeURIComponent(getmessage);//url encodes data
$.ajax({
type: "POST",
url: "test.php",
data: {'getmessage': getmessage},
dataType: "json",
success: function(data) {
$("#message_ajax").html("<div class='successMessage'>" + data.message + "</div>");
}
});
});
});
});
</script>
这里有几件事。您在代码周围有一个看似无关的匿名包装器。而且看起来页面更新的代码是不完整的,并且被注释掉了。
试试这个:
$(document).ready(function(){
$("a").click(function(e){
e.preventDefault();
getmessage = "Yes";
getmessage = getmessage.serialize(); // url encodes data; DOES IT??
$.ajax({
type: "POST",
url: "test.php",
data: dataString,
dataType: "json",
success: function(data) {
$("#message_ajax").html(
'<div class="successMessage">'
+ data +
'</div>'
);
}
});
return false;
});
});
在测试时,尝试使用像Fiddler或LiveHTTPHeaders之类的东西来验证浏览器是否实际发送了您期望的数据-另一个海报可能是在dataString
中似乎不包含任何特定于点击链接的信息。您可能需要执行以下操作来获取它:
var dataString = $(this).attr('href').split('?')[1];
尝试更改-
data: dataString,
data: "getmessage=yes",
在代码中-
getmessage = "Yes";
getmessage = getmessage.serialize();
将不起作用,因为'serialize()'通常会在表单元素数组而不是字符串上调用。如果你的HTML包含一个表单,其中包含一个名为"getmessage"的输入,你可以这样做-
getmessage = $('form').serialize();
然后传递getmessage变量作为数据字符串-
data: getmessage,