使用ajax post方法,从数据库结果创建JSON对象,并将其发送回jquery UI Dialog
Creating JSON object from DB results to post back into jquery UI Dialog, using ajax post method
我有一个脚本,从DB的相关类别加载页面上的DB样本图像。
<?php
$category = 'granite';
$samples = 'SELECT * FROM material WHERE material_type = :cat';
$res = $db->prepare($samples);
$res->execute(array(':cat' => $category));
$count = $res->rowCount();
if($count > 0)
while ($row = $res -> fetch()){
$postimggranite = $row[mat_image];
$postidgranite = $row[id];
?>
<?php
echo "<div class='sample'>";
echo "<h3 class='sample_h'>$row[name]</h3>";
echo "<a href='/images/granite-worktops/samples/$postimggranite'><img src='/images/granite-worktops/thumbs/$postimggranite' alt='$row[name]' width='100' height='100' class='aligncenter size-full' title='$row[name]'></a>";
echo "<br /><a class='"button'" href='" '" rel='"nofollow'" onClick='"user_notice(this,''); return false;'">More Details</a>";
echo "</div>";
}
?>
正如您可以从上面的脚本中看到的,在关闭一个div之前,我有一个"More Details"按钮,通过单击该对话框出现在屏幕上,我需要显示来自同一DB的其他信息。我计划使用的方法是
function user_dialog(a,b){
"undefined"!=typeof jQuery.ui?($("#dialog").attr("title","Detailed Information").html(a),
$("#dialog").dialog({
modal:true,
width:400,
buttons: {
Cancel: function() {
$(this).dialog("close");
},
Download: function(){
$(this).dialog("close");
window.location=b
}
}
}
))
:window.location=b}
function user_notice(a){
download_link=$(a).attr("href");
$.ajax({
type:"POST",
url:"/includes/json.php",
data:"action=reminder&thepath="+download_link,
dataType:"json",
error:function(){
window.location=download_link
},
success:function(a){
1==a.status&&user_dialog(a.html,download_link);
}
})
};
这里也是我的json.php文件的脚本
<?php
header('X-Robots-Tag: noindex, noarchive');
$a = session_id();
if(empty($a)) session_start();
if($_SERVER['HTTP_REFERER']){
$resp_dialog = array(
'status' => 1,
'html' => '<p>Here is you sample and rest of staff</p>'
);
echo json_encode($resp_dialog);
}else{
header('HTTP/1.1 403 Forbidden');
exit;
}
?>
显然这一切都有效,行<p>Here is you sample and rest of staff</p>
出现在对话框中,但我实际需要的是创建一个json对象,从DB带来额外的信息,不知道在哪里,在json.php
文件内或创建某种额外的文件,并将urlid="something to get fromdb"
放置在href中,而不是json.php
中的$_GET['urlid']
发送给DB。基本上不知道该做什么,在哪里做。
请原谅我,因为我还在学习这一切,大部分对我来说还是很新的,所以如果我没有正确地解释一些东西,请原谅我。
您需要传入$。Ajax要详细描述的类别的id。
$.ajax({
type:"POST",
url:"/includes/json.php",
data:['cat_id': cat_id], // passing var cat_id from the link...
那么你的json.php文件应该是这样的:
<?php
header('X-Robots-Tag: noindex, noarchive');
$a = session_id();
if(empty($a)) session_start();
if($_SERVER['HTTP_REFERER']){
$cat_id = $_POST['cat_id']; // Grab the Id of the category you want to detail...
// Here you have to fetch the info from the DB...
$samples = '... WHERE cat_id = :cat'; // Create the sql here!
$res = $db->prepare($samples);
$res->execute(array(':cat' => $cat_id));
$count = $res->rowCount();
$htmlToDisplay = '';
if($count > 0)
while ($row = $res -> fetch()){
$htmlToDisplay += $row['...']; // format yout output...
}
$resp_dialog = array(
'status' => 1,
'html' => $htmlToDisplay,
);
echo json_encode($resp_dialog);
}else{
header('HTTP/1.1 403 Forbidden');
exit;
}
?>
编辑:创建"more details"链接,试着这样做:
echo "<div class='sample'>";
/* ... */
// Passing $row[id] to user_notice() function!
echo "<br /><a class='"button'" onClick='"user_notice(this,". $row[id] ."); return false;'">More Details</a>";
echo "</div>";
然后,将user_notice()
函数改为:
function user_notice(a,cat_id){ // New parameter cat_id!
download_link=$(a).attr("href");
$.ajax({
type:"POST",
url:"/includes/json.php",
data:{ cat_id: cat_id }, // Passing cat_id to json.php... don't forget to pass your other variables
/* ... */
看一下如何通过$传递变量。ajax在
在$.Ajax()函数中更改传递的数据
data:"action=reminder&thepath="+download_link,
data: "{'action':'reminder','thepath':'"+download_link+"'}"
相关文章:
- jQuery UI自动完成突然停止工作
- Rails/JSON:如何将JSON用于jquery UI自动完成表单
- 停止jQuery UI滑块移动超过给定值
- Jquery UI自动完成无法工作
- jquery ui滑块上的滑块值
- jQuery UI可排序-多连接列表拖动
- 使用Jquery ui时滑块无法工作
- JQuery UI可拖动潜水与滚动棒到鼠标
- jQuery UI自动完成-修改问题
- JQuery UI日期选择器:在选择出发日期时自动弹出返回日期
- 阻止选项卡缓存jquery ui
- 将jQuery UI Timepicker Addon与React一起使用
- 如何在页面重新加载时显示jquery ui对话框
- jquery ui自动完成导致标头错误
- jquery UI draggable:UI.children不是一个函数
- 在JQuery UI Accordion Sortable中使用touchpunch无法正确使用touch
- Jquery UI对话框不会消失
- 无限循环onsen UI + jquery
- Ignite UI - (jQuery) - 无法使用 ig.excel.WorksheetCellComment 在单
- 可排序的UI jquery的奇怪行为