0

嗨，我是一个初学者，我在软件网站上工作。我已经为网站构建了所有页面和布局，这些页面和布局仅使用 HTML CSS 和 JAVASCRIPT 就很容易完成，剩下的就是为不同的软件制作主要类别页面，这对我来说很难。

我想在这样的类别页面上添加排序选项（请参阅此处） ，用户应该能够根据日期、名称、添加日期等对软件进行排序。并且还能够控制 软件的最大显示数量，如 20、30、100 等。

在我的 HTML 页面上，我有这些div，我想在其中显示来自表“internet_security”（它是一个测试表）的MySQL 数据库“security_software”（它是一个测试数据库）的数据（不同的软件）

HTML div 的

  <div class="category-container">
    <div class="category-image"></div>
    <div class="category-desc"><a href="#">#</a><p>text</p></div>
    <div class="rating5" >Editors' rating: </div>
    <div class="category-download-btn"><a href="#">Download</a></div>
    <div class="category-buy-btn"><a href="#">Buy</a></div>
  </div>

经过一些研究，我得到了使用 JSON AJAX PHP &MySQL 的解决方案

我有 JAVASCRIPT 代码

<head>    
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.ajax({
    url: 'ajax.php',
    dataType: 'json',
    success: function(response){
        data = '';
        $.each(response,function(i,val){
          data = '<div class="category-image">'+val.image+'</div>'+
        '<div class="category-link"><a href="#">'+val.id+'</a></div>'+
        '<div class="category-desc"><p>'+val.description+'</p> </div>'+
        '<div class="rating5" >'+val.rating+'</div>'+ 
        '<div class="category-download-btn"><a href="'+val.download+'">Download</a></div>'+ 
        '<div class="category-buy-btn"><a href="'+val.buy+'">Buy</a></div>';
        $('<div>').attr('id',i).html(data).appendTo('#response');
    });

    }
 });
</script>
</head>
 <body>
<div id='response'></div>   
 </body>

我有 PHP 代码

<?php
$q=$_GET["q"]; 

$con = mysql_connect('localhost', 'root', '');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("security_software", $con);

$sql="SELECT * FROM internet_security ORDER by `".$q."` DESC" ;


$result = mysql_query($sql);
$response = array();
$i=0;
while($row = mysql_fetch_array($result))
  {
  $response[$i]['id']           =$row['id'];
  $response[$i]['title']        = $row['title'];
  $response[$i]['image']        = $row['image'];
  $response[$i]['description']  = $row['description'];
  $response[$i]['rating']       = $row['rating'];
  $response[$i]['download']     = $row['download'];  
  $response[$i]['buy']          = $row['buy'];
  $i++;
  }
mysql_close($con); 

echo json_encode($response);
?>

现在它根本不起作用，因为我没有任何地方可以在我拥有的 javascript 中附加这些代码（类别下拉列表）。

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="id">id</option>
<option value="title">title</option>
<option value="image">image</option>
<option value="description">description</option>
<option value="description">rating</option>
<option value="download">download</option>
<option value="buy">buy</option>
</select>
</form>

请帮帮我，我在哪里可以附加这些代码以及如何让它工作，我完全糊涂了。

4

1 回答 1

2

首先值得注意的是，如果您要显示表格数据...使用表格！它会让你的事情变得容易得多。

第二。构建您的代码和表，就好像 Ajax 不存在一样。最初使用 PHP 在显示数据的页面上填充数据。然后，连接列标题，以便它们链接到您的页面，但传递您要排序的列以及哪个方向。

IE

<?
    $column = (isset($_GET["column"]) ? $_GET["column"] : 'id'); 
    $direction = (isset($_GET['direction']) ? $_GET['direction'] : 'asc');
    $con = mysql_connect('localhost', 'root', '');
    if (!$con)
    {
        die('Could not connect: ' . mysql_error());
    }

    mysql_select_db("security_software", $con);
    $sql="SELECT * FROM internet_security ORDER by '".$column."' " . $direction;


    $result = mysql_query($sql);
    $response = array();
    $i=0;
    while($row = mysql_fetch_array($result))
    {
        $response[$i]['id']           =$row['id'];
        $response[$i]['title']        = $row['title'];
        $response[$i]['image']        = $row['image'];
        $response[$i]['description']  = $row['description'];
        $response[$i]['rating']       = $row['rating'];
        $response[$i]['download']     = $row['download'];  
        $response[$i]['buy']          = $row['buy'];
        $i++;
    }
    mysql_close($con); 
?>

<div id="content">
    <table>
        <thead>
            <tr>
                <td><a href="table.php?column=id<?= (isset($_GET['column']) && $_GET['column'] == 'id' && !isset($_GET['direction']) ? '&direction=desc' : ''); ?>">ID</a></td>
                <td><a href="table.php?column=title<?= (isset($_GET['column']) && $_GET['column'] == 'title' && !isset($_GET['direction']) ? '&direction=desc' : ''); ?>">Title</a></td>
                <td><a href="table.php?column=rating<?= (isset($_GET['column']) && $_GET['column'] == 'rating' && !isset($_GET['direction']) ? '&direction=desc' : ''); ?>">Rating</a></td>
                <td><a href="table.php?column=download<?= (isset($_GET['column']) && $_GET['column'] == 'download' && !isset($_GET['direction']) ? '&direction=desc' : ''); ?>">Download</a></td>
            </tr>
        </thead>
        <tbody>
            <? foreach($response as $i => $row) : ?>
            <tr>
                <td><?= $row['id']; ?></td>
                <td><?= $row['title']; ?></td>
                <td><?= $row['rating']; ?></td>
                <td><?= $row['download']; ?></td>
            </tr>
            <? endforeach; ?>
        </tbody>
    </table>
</div>

上面的代码将放在一个单独的 PHP 文件中，没有任何其他 HTML 等。然后，在要显示此表的页面上，您只需<? include('path-to-file.php'); ?>包含它。

最后......在您显示表格的页面顶部，您可以输入：

<?
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
    {
        include('path-to-file.php');
        die();
    }
?>

然后，上面的代码将检测 Ajax 请求并仅以新顺序为包含数据的表提供服务。

然后，您需要使用 Javascript 通过新的 HTML 替换表格

$('#content table thead a').live('click', function(e)
{
    e.preventDefault();
    $.ajax(
    {
        url : $(this).attr('href'),
        success : function(resp)
        {
            $('#content').html($(resp).html());
        },
        error : function()
        {
            alert('There was a problem sorting your table...');
        }
    });
});

resp包含您的 Ajax 响应的变量在哪里。

注意：这只是处理这种情况的一种非常简单粗暴（哦，未经测试）的方法。您需要自己改进它以防止任何与安全相关的问题，例如 SQL 注入。

于 2012-05-18T11:34:42.347 回答