2016-09-18 25 views
-1

この質問は十分に理解されているかどうかを確認するために必要な質問ですが、何回か答えられたかもしれませんが、具体的なシナリオで質問したいと思います。変数をAjaxからJavascriptに渡す

私は、HTML/Javascriptページが読み込まれると、サーバー側の呼び出しをトリガーしてデータベースから情報を照会する必要があります。この情報は、クライアントに渡すことができるサーバー側に配列を形成する必要があります。クライアントからは、配列をループしてクライアント側の配列にプッシュすることができます(なぜなら、このコンテキストでは配列に置かれる前に文字列で接頭辞を付ける必要があるからです) )が表示されます。

私は現在、divがターゲティングされ、置き換えられているが配列ではない例しか見ていません。

私はいくつかの異なるコードを試してみましたが、悲しいことに運がありませんでした(そして、クライアントとサーバーの間で値を渡す方法を完全に理解できないようです)。

他の言語(C#、Python)にかなり精通していますので、この種のものについては完全なnewbyではありませんが、これはJavascript/Ajaxへのかなり新しいベンチャーです。

<?php 
//somearray.php 
$arr = ["bar", "baz", "kaz"]; 
header('Content-Type: application/json'); 
echo json_encode($arr); 

を次に、あなただけのJSONとプロセスをデコードし、あなたのAJAXライブラリを使用して要求または何でも作る:json_encodeしたがって、JavaScriptで使用するためのデータを転送するときにはJavaScript Object Notation(JSON)を使用する

+0

ここ
<? // I was too lazy to set up a DB for this example. // You should know how to process database data in PHP /* $sql = "SELECT 'id','name','city' FROM 'useres'"; $result = $db->query($sql); while($array = $db->assoc($result)) { $json['id']['name'] = $array['name']; $json['id']['city'] = $array['city']; } */ // This part is only the example data which you should have received from the DB $json[1]['name'] = 'Test Tester'; $json[1]['city'] = 'Test Village'; $json[2]['name'] = 'Claud Atlas'; $json[2]['city'] = 'Haven'; // echo the array as JSON echo json_encode($json); ?> 

あなたは上記のコードからのライブの例を持っていますクライアント上でデータをループするときは、ループする要素ごとにコンテナ/行を作成します。ループの最後に、ページのコンテナに追加します。 – tymeJV

+0

問題のあるコードを表示します。 – trincot

+1

私が想像することができる唯一の答えはチュートリアルへのポインタで、これはSOのためのトピック外です。あなたが試したことの[最小、完全で検証可能な例](http://stackoverflow.com/help/mcve)は、この質問を近い投票候補から提出する唯一のものです – RiggsFolly

答えて

0

は、一般的に最も簡単なあなたはJavaScriptで右がそれを作成したかのように:

<html> 
<body> 
<script> 
var xmlhttp = new XMLHttpRequest(); 
var url = "http://example.com/somearray.php"; 

xmlhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     var myArr = JSON.parse(this.responseText); 
     prefix(myArr); 
    } 
}; 
xmlhttp.open("GET", url, true); 
xmlhttp.send(); 

function prefix(arr) { 
    var output = []; 
    var i; 
    for(i = 0; i < arr.length; i++) { 
     output.push('foo ' + arr[i]); 
    } 
    console.log(output); //["foo bar", "foo baz", "foo kaz"] 
} 
</script> 
</body> 
</html> 

http://www.w3schools.com/json/tryit.asp?filename=tryjson_httpから変更)

この情報は、クライアント側に渡すことができるサーバー側の配列を形成します。クライアントから配列をループしてクライアント側の配列にプッシュできるようにする必要があります

これは、「ステートレス」プロトコルとAJAXリクエストの詳細を読むのに役立ちますサーバ/クライアント側にデータがどこに存在しているかを理解していないように聞こえるので、実際に実行しています(ヒント、まだステートレスです)。

0

さて、あなたがそれを行う方法の小さな例があります。あなたがJSONを使って作業しているとき、実際はとてもシンプルです。 PHPでjson_encode()を使用すると、簡単に配列をJSONに変換し、AJAX経由で受け取って、各ループでデータを処理できます。 HTML::ここで

あなたはtestingsに使用できるコード、ある

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>AJAX JSON Example</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
     <script> 
      $(function(){ 
       $.getJSON('ajax.php',function(data){ 
        $.each(data,function(index,value){ 
         $('body').append('Name: ' + value.name + ' | City: ' + value.city + '<br />'); 
        }) 
       }); 
      }); 
     </script> 
    </head> 

    <body> 

    </body> 

</html> 

PHP:https://work.walter-it.de/test/ajax/

関連する問題