Question

当我尝试使用getJSON显示数据时，$('#child-left-container-2')应该显示来自php文件的数据。我哪里出错？...以下是我的代码的简短示例。

php文件

while($row = mysql_fetch_assoc($query)) {

//code

    $array[] = "<div class='array-container-2' $style id='$id' data-sid='$sid' data-user='$user'>$details1</div>";


            }

            echo json_encode($array);

jquery的

$(function() {
    $('.next_button').click(function() {

var id =  $('#container').find('.graphic-blank:visible').siblings().attr('id');

        $.getJSON('fetchstack.php?id='+id,function(data) {

            $('#child-left-container-2').html(''); //clear div

            $.each(data,function(i,result) {
                $('#child-left-container-2').append(result);
            });
        });

          });
});

Answer 1

我不知道这是否可以解决您遇到的问题，但这将是我如何解决这个特殊问题。试试这段代码，如果有效，停止通过json发送html将是一个奖励。

$key = 0;
while($row = mysql_fetch_assoc($query)) {
    //code
    $array[$key]['id']      = $id;
    $array[$key]['sid']     = $sid;
    $array[$key]['user']    = $user;
    $array[$key]['content'] = $details1;
    $array[$key]['style']   = $style;
    $key++;
}

echo json_encode($array);

JS：

$(function() {
    $('.next_button').click(function() {

        var id =  $('#container').find('.graphic-blank:visible').siblings().attr('id');
        $.getJSON('fetchstack.php?id='+id,function(data) {
            $('#child-left-container-2').html(''); //clear div

            for (var i in data){
                var id      = data[i].id;
                var sid     = data[i].sid;
                var user    = data[i].user;
                var content = data[i].content;
                var style   = data[i].style;
                $('#child-left-container-2').append($('<div />').addClass('array-container-2')attr('id', id)
               .attr('data-sid', sid).attr('data-user', user).html(content);
            }           
       });
   });
});

我承认，不知道$ style是什么或者它是如何呈现的，我无法将它添加到链中。如果你发布$ style的内容我可以更新anwser。我希望这会有所帮助。

Answer 2

在jQuery的第二行

var id =  $('#container').find('.graphic-blank:visible').siblings().attr('id');

您正在尝试访问jQuery对象数组的id属性（siblings()）。您需要指定一个jQuery对象来获取$getJSON函数的id

更新如果只有一个兄弟，请执行

指定

var id =  $('#container').find('.graphic-blank:visible').siblings().eq(0).attr('id');

Answer 3

我不是故意侮辱你，但你所做的是不好的做法。如果从客户端创建HTML，则可以有更短的请求。此外，如果您使用firebug，您可以看到输出JSON的图表。它真的是一个漂亮的功能。您还可以检查它是否保存在Firebug中的DOM部分下。祝你好运。

Answer 4

在设置对html元素的响应之前，使用console.log调试它，

我没有看到你创建了一个div response = $('#child-left-container-2') 检查你是否有

<div id="child-left-container-2" />

并检查你的反应，maby json in array ... 尝试console.log(data)并使用F12打开debbuger

Answer 5

为什么不简单地在PHP文件中回显HTML，然后用它填充容器？

while($row = mysql_fetch_assoc($query)) {
    echo "<div class='array-container-2' $style id='$id' data-sid='$sid' data-user='$user'>$details1</div>";
}

$.getJSON('fetchstack.php?id='+id,function(data) {
    $('#child-left-container-2').html(data);
});

Answer 6

这是我的解决方案并且完美无瑕：

PHP：

<?php

ini_set('magic_quotes_gpc', false);
header('Content-type: text/plain');

      //DB connection credentials
$dbhost = 'hostname';
$dbuser = 'database_username';
$dbpass = 'database_password';
$dbname = 'database_name';

// allow cross-browser acces
header('Access-Control-Allow-Origin: *');

// query SQL
$sql = "do your DB query SELECT what ever here";

  //do our thingies withouth hacks (SQL Injection, etc)
try {
$dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
$dbh->query("set names utf8");
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $dbh->query($sql);  
$json_export = $stmt->fetchAll(PDO::FETCH_OBJ);
$dbh = null;

    // return JSON format DATA
echo '{"items":'. json_encode($json_export) .'}'; 
} catch(PDOException $e) {

    // return error
echo '{"error":{"text":'. $e->getMessage() .'}}'; 
}

?>

HTML LISTVIEW：

<div data-role="page" id="myPage"><div data-role="content" id="myContent">
       //my HTML list tag
  <ul data-role="listview" id="myList"></ul>
</div></div>

JAVASCRIPT

  //trigger script on show page
$('#myPage').live('pageshow',function (event) {
       //get our JSON data
    $.getJSON('path_to_your_php_json_generator_file_declared_upper',function(data){
          //append our JSON data to a variable
       var json_entries = data.items;
                //for each JSON data, append it to our list as one element
       $.each(json_entries,function(index,entry){
           $('#myList').append('<li><a href="#">' + entry.title + '</a></li>');
             //assuming we have a field named "title" in JSON data
       });
             //refresh the list for layout (style) loading
       $('#myList').listview('refresh');
    });
});

这就是你如何使用php文件生成的JSON数据在jQuery Mobile上填充列表。您可以将此类脚本调整为jQuery代码中的每个JSON解释器，即使使用参数（id，category等）也是如此！

希望它有所帮助！

Answer 7

尝试将此juste放在echo json_encode($array);之前。最终进行退出调用以避免额外输出。

header('Content-type:application/json;charset=utf-8');
echo json_encode($array);
exit();

getJSON with jquery

7 个答案: