0

私はコーディング全体に不慣れで、最近yerの助けを借りて多くのことを学んでいるので、私が抱えている次の問題が続くことを願っています!

完全にレンダリングされているJqueryリストがあり、ローカルのMYSQLデータベースから入力したダミー情報を表示します。私がこれまでに行ったことは、ユーザーがリストされたリンクの1つをクリックすると、次のページに移動して「リンク番号を選択しました」と表示され、この場合の#タグはユーザーの取引数を表します。選択したリストのリンク。

私が何をすべきかを見つけようとしているのはこれです:

  1. ユーザーの選択から得た情報(つまり、選択した取引番号)を使用して、これをデータベースに戻し、その取引番号を持つ特定のエントリを見つけて取得するにはどうすればよいですか。

私のHTMLコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Find A Deal</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        img.fullscreen {
            max-height: 100%;
            max-width: 100%;
        }
        </style>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
    $(document).on('pagebeforeshow', '#index', function(){
        $("#list").empty();
        var url="http://localhost/test/json3.php";
        $.getJSON(url,function(json){
            //loop through deals
            $.each(json.deals,function(i,dat){
                $("#list").append("<li><a id='"+dat.dealid+"'><h1>"+dat.name+"</h1><p>"+dat.dname+"</p></a></li>");
                $(document).on('click', '#'+dat.dealid, function(event){  
                    if(event.handled !== true) // This will prevent event triggering more then once
                    {
                        listObject.itemID = $(this).attr('id'); 
                        $.mobile.changePage( "#index2", { transition: "slide"} );
                        event.handled = true;
                    }
                });            
            });
            $("#list").listview('refresh');
        });
    });

    $(document).on('pagebeforeshow', '#index2', function(){       
    $('#index2 [data-role="content"]').html('You have selected Link' + listObject.itemID);
//  var url="http://localhost/test/json9.php";
//  $.getJSON(url, function(json){






    });

    var listObject = {
        itemID : null
    }    
</script>
</head>     
<body>    
<div data-role="page" id="index">
    <div data-role="header" data-position="fixed">
        <h1>Current Deals</h1>
    </div>

    <div data-role="content">
        <div class="content-primary">
            <ul id="list" data-role="listview" data-filter="true"></ul>
        </div>
    </div>

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="http://localhost/findadeal/index.html" data-icon="home">Home</a></li>
                <li><a href="http://localhost/findadeal/mydeal.html" data-icon="grid">My Deals</a></li>
            </ul>
        </div>
    </div>
</div>

<!--New Page --> 

<div data-role="page" id="index2">
<div data-role="header">
        <h1> Find A Deal </h1> 
    </div>

    <div data-role="content">
        <a data-role="button" href="#page1" data-icon="star" data-iconpos="left">Get Deal </a>
    </div>

    <footer data-role="footer" data-position="fixed">
        <nav data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="#index" data-icon="grid">My Deals</a></li>
            </ul>
        </nav>
    </footer>   
</div>
</body>
</html>

元のリスト(Json3.php)を作成するために参照されているPHP/Jsonファイルは次のとおりです。

<?php

$link = mysql_pconnect("localhost", "root", "") or die ("Could not Connect to DB");

mysql_select_db("findadeal") or die("Could not select database");

$arr = array();

$rs = mysql_query("SELECT r.restaurantid, r.name, r.image, d.dealid, d.dname, d.restaurantid
FROM restaurant r, deal d
WHERE r.restaurantid = d.restaurantid;");

while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}

echo '{"deals":'.json_encode($arr).'}';

?>

しばらくこれに関する情報を探していて、探しているものが見つからないようで、ここで途方に暮れています。私は誰かの助けに感謝します、私は本当にそれを意味します!前もって感謝します!!:)

4

1 に答える 1

0

次のようにJavaScriptを単純化できます。

$(document).on('click', '#'+dat.dealid, function(event){  
    listObject.itemID = $(this).attr('id'); 
    $.mobile.changePage( "#index2", { transition: "slide"} );
    event.stopPropagation();
}); 

ページをリロードせずにアイテムのデータをロードしたい場合は、ajax リクエストを行う必要があります。ページをリロードしてもかまわない場合はhttp://domain.com/uri/whatever?id=<the_selected_id>、PHP スクリプトで get パラメータを使用してアイテムを取得し$_GET['id']、クエリを実行してこの ID のデータを取得できます。

アップデート

データベースからデータを取得するには、PHP スクリプトが必要です。このスクリプトは次のように呼び出されます。http://www.domain.com/foo/bar/my_script.php?id=<the_id_from_the_selection>

スクリプトは次のようになります。

<?php

// Default value to return
$data = array('error' => 'No deal found');

if (isset($_GET['id']) && is_numeric($_GET['id'])) {

    // Using PDO for the database connection, it's much better and avoid SQL injection
    // Make sure the PDO extension is enable in your php.ini
    $pdo = new \PDO('mysql:host=localhost;dbname=<SOMEDB>', '<USERNAME>', 'PASSWORD');

    $sql = "SELECT * FROM deal WHERE id = :id";
    $statement = $pdo->prepare($sql);
    $statement->execute(array('id' => $_GET['id']));
    $data = $statement->fetch(\PDO:FETCH_ASSOC);
}

echo json_encode($data);

// You don't need the closing PHP tag. Actually it's easier to debug if you don't use it.

ajax リクエスト (ユーザーが何かを選択すると呼び出されます。これは JavaScript です) は次のようになります。

var dealId; // the selected deal id

$.ajax({
  url : 'foo/bar/my_script.php',
  data: {id: dealId},
  type: "GET",
  async: true,
  onSuccess: function(response){
     console.log(response); // look into the console to check the object structure
     // Display your data here using dom selector and jquery
  }
});
于 2013-02-16T00:55:04.730 に答える