1

次の JSON を生成する PHP ページにリンクする SQL データベースがあります。

[{"ID":"1","SubjectName":"Subject 1"},{"ID":"2","SubjectName":"Subject 2"}]

これを別の HTML ページにフォーマットして表示する方法を考えていました。例: (JQuery Mobile を使用)

<ul data-role="listview" data-divider-theme="b" data-inset="true">
    <li data-role="list-divider" role="heading">Subject1</li>
    <li data-theme="c">1</li>
    <li data-role="list-divider" role="heading">Subject2</li>
    <li data-theme="c">2</li>
</ul>

$dbhandle = mysql_connect($hostname, $username, $password)
    or die("Unable to connect to MySQL at".$hostname/"<br />");

//Select Database
$selected = mysql_select_db($databasename,$dbhandle)
    OR die("Could not select Database:".$databasename."<br />");

//SQL Query
$result = mysql_query("SELECT ID, SubjectName FROM Subject");
$rows = array();

while($r = mysql_fetch_assoc($result)) {
    $rows[] = $r;
    }
print json_encode($rows);
//while ($row = mysql_fetch_array($result)) {
//  echo "ID:".$row{'ID'}." Subject:".$row{'SubjectName'}."<br />";
//  }

mysql_close($dbhandle);
?>

私は PhoneGap を使用しているため、これを行うには Javascript しか使用できません。

いくつかのチュートリアルを見つけましたが、それらは URL から JSON を使用していますが、これはページに表示されるだけです。

4

2 に答える 2

2

オプションは、 AJAXまたはjQueryなどの実装を使用することができます。

次のように、 htmlファイルで jQuery AJAX オブジェクトを使用できます。

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});
  1. typeは、情報を送信、投稿、または取得する方法です
  2. urlは PHP ファイルです
  3. データは、任意の変数をパラメーターとして渡したい場合に使用されます
  4. 次のコードを成功のコミュニケーションに追加します。このセクションでは、JSON の結果を html ファイルのフィールドに割り当てることができます。
  5. jsonまたはxmlに入れるデータ型

必要に応じて、次のコードのように縮小されたjQuery オブジェクトを使用できます。

$.post('ajax/test.php', function(data) {
  $('#result').html(data);
});
  1. ajax/test.phpは PHP ファイルです。
  2. dataは、PHP ファイルで生成する json です。
  3. 「#result」は、html 要素の識別子 (ID) です。
  4. .html(data) json を html 要素に割り当てています

応答として JSON オブジェクトを取得すると、次のように要素にアクセスできます。

data.id、data.name または data.lastName

次に、このように書くことができます

 function send(){
    $.post('ajax/test.php', function(data) {
      if(data.error == 'false'){
        $('#id').html(data.id);
        $('#name').html(data.name);
        $('#lastName').html(data.lastName);
      }
      else{
        alert('Error in communication due ' + data.error);
      }
    });
}

アップデート

これは、上記の jQuery 関数をすぐに使用できる HTML フォームの例です。( onClickメソッドがsend()という JavaScript 関数を呼び出していることに注意してください)、

注: 例に一致するように、HTML を使用して jQuery コードを変更しました。

<form id="form">
   SomeId <input type="text" id="id" />
   Name <input type ="text" id="name" />
   Last Name <input type ="text" id="lastName" />
   <input type="submit" value="Send" onClick="send()" />
</form>
于 2013-08-15T14:11:49.287 に答える
0

JSON{"ID":"1","SubjectName":"Subject 1"}

$.ajax({
    url: 'THE_URL_YOU_GET_THE_DATA_FROM',
    dataType: 'json'
    success: getInfo1
});
function getInfo1(json) {
    var r = '<ul data-role="listview">';
    var l = json.length;
    for (i = 0; i < l; i++) {
        r += '<li><h4>' + json[i].SubjectName+ '</h4><p>ID: ' + json[i].ID. + '</li>';
        }
        document.getElementById('someDiv').innerHTML = r + '</ul>';
    }

これにより、php ページからデータが取得され、次のように割り当てられた Div 要素にコンテンツが挿入されます。someDiv

于 2013-09-18T07:38:30.063 に答える