0

我是整个编码方面的新手，最近在你的帮助下学到了很多东西，所以我希望它可以继续解决我遇到的下一个问题！

我有一个完美呈现的 Jquery 列表，它的作用是显示一些我输入的来自本地 MYSQL 数据库的虚拟信息。到目前为止，我所做的是，当用户单击其中一个列出的链接时，它会将它们带到下一页并说“您已选择链接 #”，并且此实例中的 # 标签表示用户的交易编号选定的列表链接。

我试图找出该怎么做是这样的：

  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 回答