get JSON - JQuery & PHP


get JSON - JQuery & PHP

我有一个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,