0

こんにちは私は初心者です私はソフトウェアサイトに取り組んでいます。HTML CSSとJAVASCRIPTだけを使用して簡単に実行できるサイトのすべてのページとレイアウトを作成しました。残っているのは、さまざまなソフトウェアのメインカテゴリページを作成することだけです。これは私にとって難しいことです。

このようなカテゴリページ（ここを参照）に並べ替えオプションを追加したいのですが 、ユーザーは日付、名前、追加された日付などに従ってソフトウェアを並べ替えることができます。また、20、30、100などのように表示するソフトウェアの最大数を制御することができ ます。

私のHTMLページには、 MySQLデータベース「security_software」（テストデータベース）のデータ（さまざまなソフトウェア）をテーブル「internet_security」（テストテーブル）から表示したいこれらのdivがあります。

HTMLDivの

  <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を使用してデータを入力します。次に、列ヘッダーを接続してページにリンクしますが、並べ替える列と方向を渡します。

すなわち

<?
    $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>

上記のコードは、他のHTMLなどを使用せずに、単一のPHPファイル内に配置されます。次に、このテーブルを表示するページに、このテーブルを<? 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 に答える