1

私はこれについてしばらく考えていました。例として、ユーザーが検索ボックスにデータを入力すると、コンテンツと検索ボックスがすべて含まれるindex.phpがあり、次のような結果が表示されます。各結果の画像とデータ。

これらの結果を入力するための最良の方法は何ですか？

例1

HTMLおよび美的タグを含む完全な結果をエコーするresults.phpへのAJAX投稿。次に、最初のページに戻って、.html（data）を使用して返されたすべてのデータを含めます。

例2

結果のスケルトンを用意して非表示にします（ラッパーdivと各結果に含まれるすべてのもの）次に、AJAXを実行してデータを取得し、divにデータを入力して表示します

またはあなたが持っているかもしれない他の提案はありますか？

4

7 に答える 7

1
  1. ユーザーが検索語を入力します。
  2. results.php に対して AJAX GET を実行します。
  3. results.php からデータを JSON 形式で返します。
  4. 検索結果を上記のデータに置き換えます。
于 2012-09-06T10:52:48.493 に答える
1

これはindex.phpにあります

$('#search').live('click',function(){
  $.ajax({
    url: 'result.php',
    data: {keyword: $('#search_box').val()},
    type: 'POST',
    dataTupe: 'json',
    success: function(response){
      $('.result_box').html(response['data']);      
    }
  });
});

これはあなたのresult.phpがどのように見えるかです

$keyword = $_POST['keyword'];    
$result = getResults($keyword);    
die(json_encode(array('data'=>$result)));

getResults 関数は、キーワード検索に基づいてデータを取得する場所である必要があります。

お役に立てれば。

于 2012-09-06T11:22:43.603 に答える
0

構造が変わらない場合は、JSON を使用してローカル JavaScript に入力することをお勧めします。

本のセットがあると考えてください。100個くらいです。それに更新用のHTMLを出力するとなると、どうしてもコストがかかります。一方、次のようなものを出力します。

{
    success:true,
    rows:[{
        "id":"1",
        "title":"Office Space",
        "director":"Mike Judge",
        "released":"1999-02-19",
        "genre":"1",
        "tagline":"Work Sucks",
        "coverthumb":"84m.jpg",
        "price":"19.95",
        "available":"1"
    },{
        "id":"3",
        "title":"Super Troopers",
        "director":"Jay Chandrasekhar",
        "released":"2002-02-15",
        "genre":"1",
        "tagline":"Altered State Police",
        "coverthumb":"42m.jpg",
        "price":"14.95",
        "available":"1"
    },{
        "id":"4",
        "title":"American Beauty",
        "director":"Sam Mendes",
        "released":"1999-10-01",
        "genre":"2",
        "tagline":"... Look Closer",
        "coverthumb":"12m.jpg",
        "price":"19.95",
        "available":"1"
    },{
        "id":"5",
        "title":"The Big Lebowski",
        "director":"Joel Coen",
        "released":"1998-03-06",
        "genre":"1",
        "tagline":"The \"Dude\"",
        "coverthumb":"49m.jpg",
        "price":"21.90",
        "available":"1"
    },{
        "id":"6",
        "title":"Fight Club",
        "director":"David Fincher",
        "released":"1999-10-15",
        "genre":"3",
        "tagline":"How much can you know about yourself...",
        "coverthumb":"94m.jpg",
        "price":"19.95",
        "available":"1"
    }]
}

これは jQuery.parseJSON によって非常によく解析され、s または complexとして、tableまたはその中に表示されます。lidiv

于 2012-09-06T10:52:12.880 に答える
0

それは、現在のページ構造と受信データの構造に関して、どちらが簡単かによって異なります。どちらのアプローチもまったく問題ありませんが、最初のアプローチの方が使いやすく、PHP ファイルで出力をフォーマットできるため (必要な場合に備えて)、最初のアプローチに少し傾いているかもしれませんが、唯一の違いは基本的に量です。 AJAX によって受信されるデータの量と、今日のインターネット速度では、コンテンツと一緒にいくつかの HTML タグを使用しても大きな違いはありません。

于 2012-09-06T10:52:40.270 に答える
0

2番目のオプションは、はるかに優れたIMHOであり、JSONを使用してデータを取得し、取得した後にクライアント側に挿入することを心配します. このように考えてみてください: 送受信するデータが少ないほど良いです。ここにいくつかのポイントがあります

  • JSON を渡すだけで、後でビューを変更する必要がある場合は、コードの保守が容易になります。
  • 開発者が JSON を渡すだけの場合、コードはより読みやすくなり、多くのレイアウト HTML 構造を経由する必要なく、データの問題を簡単に修正できます。
于 2012-09-06T10:55:16.773 に答える
0

どちらも可能ですが、ほとんどの場合、完全な html 回答 (オプション 1) を使用する方が適切です。動的な php ページがある場合は、テンプレート エンジンを使用する必要があります。

私は通常、複数のテンプレートに行き着きます: ページ構造を持つメイン テンプレート、メニュー テンプレート、記事テンプレート、そしてあなたの場合は結果テンプレートです。

次に、ajax の有無にかかわらず、検索要求を行うことができます。js が有効になっている場合は、「結果」テンプレートを使用して結果をレンダリングするだけです。HTML フラグメントを返し、ページの適切なポイントに挿入します。

js が無効になっている場合は、結果を新しいページにレンダリングする新しいページをリクエストします。

js テンプレート エンジンも使用できますが、これまでのところ、PHP と js で適切に実装されているものは見つかりませんでした。

于 2012-09-06T11:07:35.313 に答える
0

JSON は、送信するデータがはるかに少ないため、最適なオプションです。データのスケルトンを生成する必要がないことを示す Jquery docs からの直接の例。ご覧のとおり、作成する必要があるのは、javascript から作成された要素を保持するコンテナーだけです。<img>タグは必要に応じて作成され、指定されたimagesdiv コンテナーに追加されます。

<!DOCTYPE html>
<html>
<head>
    <style>img{ height: 100px; float: left; }</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="images">

</div>
<script>
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
        {
            tags: "mount rainier",
            tagmode: "any",
            format: "json"
        },
        function(data) {
            $.each(data.items, function(i,item){
                $("<img/>").attr("src", item.media.m).appendTo("#images");
                if ( i == 3 ) return false;
            });
        });</script>

</body>
</html>
于 2012-09-06T11:12:43.550 に答える