Php 从Jquery中选定的列表元素检索数据
我对整个编码工作都是新手，最近在你的帮助下我学到了很多东西，所以我希望它能继续解决我遇到的下一个问题 我有一个Jquery列表，它呈现得非常完美，它显示了一些我输入的来自本地MYSQL数据库的虚拟信息。到目前为止，我所做的是，当用户单击其中一个列出的链接时，它会将它们带到下一页，并说您已选择了链接，而此实例中的标记表示用户选择的列表链接的dealid号 我想知道的是： 根据从用户选择中获得的信息，即所选的dealid号，我如何将其传递回数据库，以便找到并检索具有该dealid号的特定条目。 我的HTML代码如下：Php 从Jquery中选定的列表元素检索数据,php,jquery,ajax,json,Php,Jquery,Ajax,Json,我对整个编码工作都是新手，最近在你的帮助下我学到了很多东西，所以我希望它能继续解决我遇到的下一个问题 我有一个Jquery列表，它呈现得非常完美，它显示了一些我输入的来自本地MYSQL数据库的虚拟信息。到目前为止，我所做的是，当用户单击其中一个列出的链接时，它会将它们带到下一页，并说您已选择了链接，而此实例中的标记表示用户选择的列表链接的dealid号 我想知道的是： 根据从用户选择中获得的信息，即所选的dealid号，我如何将其传递回数据库，以便找到并检索具有该dealid号的特定条目。 我的
<!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>
<?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).'}';
?>
<!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>
<?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).'}';
?>
我在这里不知所措，因为我一直在寻找这方面的信息，但似乎找不到我要找的。我感谢任何人的帮助，我是认真的！提前谢谢！！： 您可以像这样简化javascript：
$(document).on('click', '#'+dat.dealid, function(event){
listObject.itemID = $(this).attr('id');
$.mobile.changePage( "#index2", { transition: "slide"} );
event.stopPropagation();
});
<?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.
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
}
});
$(document).on('click', '#'+dat.dealid, function(event){
listObject.itemID = $(this).attr('id');
$.mobile.changePage( "#index2", { transition: "slide"} );
event.stopPropagation();
});
<?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.
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
}
});
谢谢你的快速回复！听起来不错，我必须先读一读这两种方法，然后再弄清楚如何做。你知道你建议的第二种方法叫什么吗？或者，您个人会推荐这两个选项中的哪一个？因为我觉得不重新加载页面会让应用看起来更好，但我不确定行业标准会是什么！如果您需要在同一页面上显示数据，下拉列表选择您最好使用ajax。为此，我推荐jQuery$.ajax。您需要调用一个php脚本从数据库中获取数据，并将其作为json字符串返回，请查看php json_encode。如果您查找$.ajax教程，您会找到您想要的内容下拉选择？那是一种列表还是什么？我使用的列表只是一个标准列表。当用户导航到某个页面时，不同的元素会在整个页面上列出。然后，当做出选择时，它们会被带到一个新页面，我希望在那里显示新信息-我是否仍然使用$.ajax来显示这些信息？是的？如果你重定向到一个新页面，不，你不需要ajax。但是在你的例子中看不到重定向。我很抱歉，我希望我没有引起混淆。当被点击元素的id被显示时，它被呈现在index2上——我在上面的html文件末尾调用了index2的代码。这一切都很顺利！我在index2上呈现该数字的原因只是为了测试是否选择了正确的内容：我很难弄清楚的是如何将该dealid发送到数据库，以便我可以将该记录拉过并显示在index2页面上。