JSON値が正しく表示されない

Question

私はajaxからのPOST要求を受け入れ、応答を返すPHPスクリプトを作成しました。すべて正常に動作します。しかし、手紙を受け取る文字列分割文字は、私は理由が何であるか理解できません。 'ImagePathの' が、それは文字で分割し、文字として出力を与えている：

はここ

$("#btn").click(function(){ 
      console.log($("#search_bar").val()); 
      var dataV; 
      var htmlText = ''; 
      var containerbootsrap = ''; 
      var filename = ''; 
      var index_no; 
       $.ajax({ 
        type: "POST", 
        crossDomain: true, 
        url: "http://localhost:8090/ontology/setText", 
        data: $("#search_bar").val(), 
        contentType: 'text/plain', 
        // dataType: "json", 
        success: function(data, textStatus, jQxhr){ 
         console.log('data'); 
         console.log(data); 

         for(var item in data) { 
         console.log ("item: " + item); 
         console.log ("data: " + data[item]); 
         index_no = data[item]; 

         // htmlText += '<div class="div-conatiner">'; 
         // htmlText += '<p class="p-name"> Name: ' + data[item] + '</p>'; 
         // htmlText += '<img class="imageload" src="' + data[item] + '" />'; 
         // htmlText += '</div>'; 

         // filename = data[item].replace(/^.*[\\\/]/, '') 

         $.ajax({ 
          data: 'index_no=' + index_no, 
          url: 'retrivedata.php', 
          method: 'POST', // or GET 
          dataType: 'json', 
          success: function(msg) { 
            console.log(msg); 
            for(var item in msg){ 
             console.log ("item: " + item); 
             console.log ("data: " + msg[item]); 
            } 

            $('#home').hide(); 

            containerbootsrap += '<div class = "container" id="search_container">'; 
            containerbootsrap += '<div class = "row homepage">'; 
            containerbootsrap += '<div class = "col-md-5 col-md-offset-3">'; 
            containerbootsrap += '<a href="#" class="thumbnail">'; 
            containerbootsrap += '<img class="imageload" src="' + msg + '" />'; 
            containerbootsrap += '<h3 id="video_name"> ' + filename + ' </h3>' 
            containerbootsrap += '</a>'; 
            containerbootsrap += '</div>'; 
            containerbootsrap += '</div>'; 
            containerbootsrap += '</div>'; 

            $('body').append(containerbootsrap); 

            } 
         }); 

         // $.post('retrivedata.php', { num: 5 }, function(result) { 
         //  alert(result); 
         // }); 

         // $('#home').hide(); 
         } 

         // $('body').append(containerbootsrap); 

        }, 
        error: function(jqXhr, textStatus, errorThrown){ 
         console.log(jqXhr); 
         alert(jqXhr) 
        } 

       }); 
     }); 

PHPコードは、私のように出力を必要とする

<?php 
$index_no = $_POST["index_no"]; 
// echo $index_no * 2; 

include('dbConnection.php'); 
$query = mysql_query("SELECT * FROM video_data WHERE index_no = $index_no"); 

while ($row = mysql_fetch_assoc($query)) { 
    $imagePath = $row['thumbnail_url']; 
    $videoPath = $row['video_url']; 
    // echo $imagePath; 
    // echo $videoPath; 
    echo json_encode($imagePath); 
} 

?> 

を下回っている、私のAJAXコードです。ここ

は、実際の出力

Output

ですが、私は1行で出力を必要としています。 like /video_frames/bb/frame136.jpg 私が間違っている場所を見つけ出すのを助けてください。

Answer 1

文字列ではなく配列を指定する必要があるPHPコードでは、値を返すところです。 $ imagePathの変数は文字列のようです。このようなことをすることができます。

echo json_encode(array('result' => $imagePath)); 

「結果」キーで結果が得られます。それを解析して使用することができます。

Answer 2

返されたJSON文字列を解析して配列にする必要があります。これを行う1つの方法は、ajax成功コールバックにdata = $.parseJSON(data)を追加することです（下に強調表示されています）。あなたが見ているのと同じものを作り直すことができました。お役に立てれば。 parseJSON()

... 
    success: function(data, textStatus, jQxhr){ 
        console.log('data'); 
        console.log(data); 

data = $.parseJSON(data);

   for(var item in data) { 
        console.log ("item: " + item); 
        console.log ("data: " + data[item]); 
        index_no = data[item]; 
... 

Answer 3

あなたはこれがそうでなければ、あなたのモジュール良好な安定性を与える最初の

data = '{"name": "Bhushan"}' //string value 
data = {name: "Bhushan"}  //object value 

//for testing you can use either, this will make it unbreakable for this context 

if(typeof(data) == 'string') 
{ 
    data = JSON.parse(data) 
} 
//rest of code 

ようになっている変数の値の型をチェックするためのより良い方法あなたが得るかもしれないjsonが予期しないトークンを解析する。。