2016-07-12 1 views
0

が、これは私のPHPスクリプトですAJAX呼び出しの後にjQueryを使用してJSONを解析することができませんでし

<?php 

$wishes_array["wishes_text"] = null; 
$wishes_array["total"] = null; 
$count = 0; 
// wishes has all records 
if(!is_null($wishes)) 
{ 
    foreach($wishes as $wish) 
    { 
     if($wish->text != null) 
     { 
      $wishes_array["wishes_text"][$count] = html_escape($wish->text); 
      $count++; 
     } 
    } 
    $wishes_array["total"] = sizeof($wishes); 
    echo json_encode($wishes_array); 
} 
?> 

背景

ユーザーがボタンを使用して、彼の願いを送信しますが、彼はいくつかのメッセージを送信するオプションを持っています彼の願い、人Aはちょうど願いを送ったとしましょうが、人Bはテキスト「幸せな誕生日」を送ってくれました。人Cはテキスト「誕生日を過ごしてください」をお寄せください。

このアレイを使用しています。total受け取った願いの数(希望するテキストの有無にかかわらず)およびwishes人が送信した願いのテキスト。

問題

jqueryのを、ここで私がやった、それはundefined

var total_start = '<div style="padding: 3px;margin: 10px auto;"><i class="fa fa-heart" style="background: #e53935; color: #fff;padding: 5px;border-radius: 50%;"></i> '; 
var total_end = '</div>'; 
var startString = '<div style="padding: 3px;margin: 10px auto;"><i class="fa fa-heart" style="background: #e53935; color: #fff;padding: 5px;border-radius: 50%;"></i>'; 
var endSting = '</div>'; 
var wishes = ''; 
var count = 0; 
if(data["wishes_text"] != null){ 
    $.each(data, function(index, element) { 
     wishes += startString; 
     wishes += ' ' + data["wishes_text"][count]; 
     wishes += endSting; 
     count++; 
    }); 
} 
var total = ""; 
if(data["total"] == 1) 
{ 
    total = total_start + data["total"] + ' person wished' + total_end; 
} 
else 
{ 
    total = total_start + data["total"] + ' people wished' + total_end; 
} 
$('#wish_div').html(total + wishes); 

AjaxのレスポンスJSON

{"wishes_text":["wish 1","wish 2"],"total":3}

を返すものです使用してJSONを解析に使用することができません
+2

AJAXリクエストを作成するコードはどこですか? –

+0

ブラウザのデバッガを使って 'data'変数を見てください。 javascript配列は数値でインデックスされなければならないので、使用する配列が数値ではない場合は、JSONオブジェクトが作成されます。 – RiggsFolly

+0

javscriptの実行場所を教えてください。また、正確には何が定義されていませんか? – charlietfl

答えて

1

あなたのコードは、dataに含まれるwishes_text配列の代わりに、dataを繰り返し処理しようとしているだけです。ロジックをわずかに整理することもできます。 JSコードでHTMLの大きな塊が上にあるように私はまた、あなたがインラインスタイリングの上にスタイルシートやクラスを使用するには見てください、ともテンプレートライブラリと思い

var total = '<div style="padding: 3px;margin: 10px auto;"><i class="fa fa-heart" style="background: #e53935; color: #fff;padding: 5px;border-radius: 50%;"></i>' + data["total"] + ' ' + (data.total == 1 ? 'person' : 'people') + ' wished</div>'; 
var startString = '<div style="padding: 3px;margin: 10px auto;"><i class="fa fa-heart" style="background: #e53935; color: #fff;padding: 5px;border-radius: 50%;"></i>'; 
var endSting = '</div>'; 
var wishes = ''; 

if (data.wishes_text != null) { 
    $.each(data.wishes_text, function(index, element) { 
     wishes += startString + ' ' + data["wishes_text"][index] + endSting; 
    }); 
} 
$('#wish_div').html(total + wishes); 

Working example

:これを試してみてくださいベストプラクティスの観点からは、「大きすぎる」という限界があります。

+0

ありがとう、私はまだJavaScriptをマスターしています:) – runningmark

関連する問題