jQueryを使用したgetJSON

Question

getJSONでデータを表示しようとすると、何も起こりません。$('#child-left-container-2')は、phpファイルのデータを表示する必要があります。どこが間違っていたのですか？...以下は私のコードの簡単な例です。お使いのjQuery

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

の2行目に

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

あなたは（jQueryのオブジェクトの配列のid属性にアクセスしようとしていますsiblings()）。私はあなたをまったく侮辱することを意味するものではありませんあなたが唯一の兄弟がある場合は、あなたの$getJSON機能

更新のIDを取得するには1つのjQueryオブジェクトを指定する必要があり、

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

Answer 2

を行うことで、これを指定しますあなたがしているのは悪い習慣です。クライアント側からHTMLを作成すると、要求が短くなる可能性があります。また、firebugを使用すると、出力JSONのグラフを見ることができます。その本当に素晴らしい機能です。 FirebugのDOMセクションの下に保存されているかどうかを確認することもできます。がんばろう。

Answer 3

あなたがにconsole.logとそれをデバッグすると要素をHTMLに応答を設定する前に、

私はあなたが

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

を持っていて、レスポンスチェックする場合は、response = $('#child-left-container-2') チェックにdiv要素を作成した参照いけません、私はこれが発生している問題を解決するかどうかを知るdont't

Answer 4

はF12でconsole.log(data)とオープンdebbugerを試してみてください...下の配列にJSONをmabyが、これはbのでしょうどのように私はこの特定の問題を解決するかe。 このコードを試してみてください。うまくいけば、htmlからjsonへの送信を停止することができます。

$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の内容を投稿すると、anwserを更新できます。 私はこれが役立つことを願っています。

Answer 5

HTMLをPHPファイルにエコーしてから、そのコンテナに入れてみませんか？

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、カテゴリなど）を使用していても適用できます！

これはちょっと便利ですね！

Answer 7

echo json_encode($array);の前にこのジャケットを入れてみます。 最終的には、余分な出力を避けるために終了呼び出しを行います。

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