jquery - 在单独的表中呈现 Mysql 数据取决于值

Question

我有 Ajax、jQuery 脚本，可以自动检查数据是否已更改并加载此数据而无需刷新页面。

现在我想在单独的表中显示这些数据，具体取决于 mysql 行中单元格的值。

function get_news(){ 

    if($result = $this->db->query('SELECT t1.* FROM fandb t1 JOIN (SELECT tableno, MAX(add_date) add_date FROM fandb GROUP BY tableno ASC) t2 ON t1.tableno = t2.tableno AND t1.add_date = t2.add_date WHERE AND id<>1;')){

        $return = '';

        while($r = $result->fetch_object()){
        if (''.htmlspecialchars($r->title).''=='1') { $area_new='STARTER'; } elseif (''.htmlspecialchars($r->title).''=='2') { $area_new='MAIN COURSE'; } elseif (''.htmlspecialchars($r->title).''=='3') { $area_new='DESSERT'; }
        if (''.htmlspecialchars($r->title).''=='1') { $class_new='id="kitchen_tab_starter"'; } elseif (''.htmlspecialchars($r->title).''=='2') { $class_new='id="kitchen_tab_main"'; } elseif (''.htmlspecialchars($r->title).''=='3') { $class_new='id="kitchen_tab_dessert"'; } elseif (''.htmlspecialchars($r->title).''=='0') { $class_new='id="kitchen_tab_done"'; }
            $return .= '<button '.$class_new.'><div class="fontbig">'.htmlspecialchars($r->tableno).'</div><div class="fontsmall">'.$area_new.'</font></div></button>';
        }
        return $return;
    }
}

现在我想根据数据库中标题列的值来显示数据。因此，如果 title 等于 1，则它会显示在顶部 div 中，如果 title 等于 2 则显示在第二个 div 中，如果 3 则显示在第三个 div 中。

我试图在 while() 循环中使用 foreach 循环，但它不起作用。

您有什么想法可以帮助我解决这个问题吗？

谢谢

Answer 1

好吧，我怀疑如果不知道稍后如何处理这些数据的所有细节，有人可以回答这个问题。但由于它已经在 StackOverflow 上，我尝试回答它，这样其他人也可以从中得到一些东西。

如果您确实使用我的脚本 http://blog.codebusters.pl/en/ajax-auto-refresh-volume-ii/那么你应该注意到涉及到一个 JSON。您应该充分利用这一点，因为在 PHP 中，当您发出 AJAX 请求时，您无法控制代码在 HTML 中的位置。反正也不直接。

你可以在 JS 部分控制它。因此，您可以通过发出 3 个不同的请求来实现这一点，“成功”后将在相关 div 中添加响应，或者传递一个变量来指示将此响应放在何处。

假设您想通过一个请求同时更新几个位置，最简单的方法是在 get_news() 中返回一个数组，如下所示:

$return = array();
while($r = $result->fetch_object()){

    /* I don't know what exactly is in title but if there 
    are only numbers (integers), then just use a number 
    and not string and htmlspecialchars, note that strings 
    like "lorem ipsum" will be changed to 0, and "123 ABC" to 123. 
    You currently compare this to numbers so that's why I brought this up. 
    Use with caution. */

    switch((int)$r->title){
        case 1:
            $arr= array(

                /* the id of a div that you want to update */
                'destination'=>'#kitchen_tab_starter',

                /* the html that will replace current html
                in div#kitchen_tab_starter */
                'html'=>'<some html you want to embed if its 1>'

            );
            $return[] = $arr;
        break;
        case 2:
            $arr= array(
                'destination'=>'#kitchen_tab_main',
                'html'=>'<some html you want to embed if its 2>'
            );
            $return[] = $arr;
        break;
        /* ... and so on */
    }
}
return $return;

这在 checker.php 文件中更改为 JSON 对象，并且该 JSON 在响应中发回。现在你有了一个像这样的对象的响应:

response = {
  update:true,
  news:{
    0:{
      destination:'div-id',
      html:'<some html>'
    },
    1:{
      destination:'div-id',
      html:'<some html>'
    }
  }
}

现在您需要更改这个简单的行:

$('#message-list').html(response.news);

即将您当前的 html 更改为与此类似的内容

//check if we have something inside news
if(response.news.length>0){
  $.each(response.news, function(i, item) {
    $(item.destination).html(item.html);
  });
}

您应该能够实现这一概念来更新多个 div。