使用ajax post方法,从数据库结果创建JSON对象,并将其发送回jquery UI Dialog

Creating JSON object from DB results to post back into jquery UI Dialog, using ajax post method

本文关键字:UI jquery Dialog JSON 方法 post ajax 数据库 使用 创建 结果      更新时间:2023-09-26

我有一个脚本,从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+"'}"