0

私が学校向けに作成しているWebサイトでは、初めてJqueryを広範囲に使用しようとしています。これまでのところかなりの管理を行っていますが、2つの（おそらく関連する）問題に悩まされています。

次のケースはやや長いことは承知していますが、何が起こっているのかをよく理解するには、これを読んでいるすべての人に関連するすべてのコードを提出する必要があると思います。

基本的に、Webサイトは1つのindex.htmlファイルであり、CSSがスローされ、いくつかのボタンがあり、1つのdivにIDコンテンツが含まれています。私はこのコードを使用してこれを機能させます：

    <script type="text/javascript">
        if ($('#content').innerHTML == " "){
            $(document).ready(function(){
                $('#content').load('main_text.html');
            });
        }
    </script>   
    <script type="text/javascript">
        function loadContent(elementSelector, sourceURL) {
            $(""+elementSelector+"").load(""+sourceURL+"");
        }
    </script>

次に、search.htmlという名前のコンテンツページが1つあります。このページには、検索文字列を（ajaxを介して）search.phpページに送信するフォームのみが含まれ、検索結果を同じ検索のsearch_resultsというdivにすぐに戻す必要があります。 .htmlファイル。これに使用するjquery：

    <script type='text/javascript'> 
        $(document).ready(function(){ 
        $("#search_results").slideUp(); 
            $("#search_button").click(function(e){ 
                e.preventDefault(); 
                ajax_search(); 
            }); 
            $("#search_term").keyup(function(e){ 
                e.preventDefault(); 
                ajax_search(); 
            }); 

        }); 

        function ajax_search(){ 
            $("#search_results").show(); 
            var search_val=$("#search_term").val(); 

            $.post("Functions/search.php", {search_term : search_val}, function(data){
                if (data.length>0){ 
                    $("#search_results").html(data); 
                } 
            }) 
        } 
    </script>

私が抱えている問題は次のとおりです。コードの最初の行が表示される前：if（$（'＃content'）。innerHTML == ""）{; 実装すると、サイトを開き、main_text.htmlがうまく読み込まれ、他のサブページにうまく移動できます。ただし、search.htmlのフォームフィールドに何かを入力しても結果は表示されませんでした（入力するだけで関数が既にトリガーされているはずです）。このフォームの検索ボタンを押すと、クエリ結果が表示される代わりに、main_text.htmlファイルが#contentdivに再度読み込まれます。これにより、おそらく、どういうわけか、コードは次のようになります。

    $(document).ready(function(){
        $('#content').load('main_text.html');
    });

再び望まれないと呼ばれていました。なぜ私がinnerHTMLが存在するかどうかのチェックを実装したのか。

ただし、最初にページをロードしたとき、＃contentdivは初期コンテンツをまったくロードしません。（ページの背景のように、Webページのセクションが真っ黒になります）メインコンテンツdivにコンテンツを再度ロードするには、任意のボタンをクリックする必要があります。また、search.htmlに戻ると、以前のように、結果を得るために何かを入力しても機能しません。ここで検索ボタンを押すと、ページを開いたときに表示される最初の結果、つまり黒く塗りつぶされた#contentdivが再び表示されます。

したがって、どういうわけか、最大の問題は、PHPから結果を取得するためのjqueryが機能していないように見えるという事実にあります。search.htmlの#search_resultdivに検索結果が表示されないという問題が修正された場合、content.innerhtmlチェックに関する私の問題はおそらく時代遅れになる可能性があります。

誰もがこれを修正するために私ができることについて何か考えを持っています。そうでなければ、私が作っている種類のウェブサイトのために私が取ることができる他のアプローチは何ですか。私はここでjqueryを学ぼうとしているので、より良いアプローチが常に評価されます。私はむしろこれを正しい方法で行うことを学びたいと思います。:)

御時間ありがとうございます。

4

1 に答える 1

0

ここで注意すべき点は次のとおりです。

<script type="text/javascript">
    if ($('#content').innerHTML == " "){
        $(document).ready(function(){
            $('#content').load('main_text.html');
        });
    }
</script>   
<script type="text/javascript">
    function loadContent(elementSelector, sourceURL) {
        $(""+elementSelector+"").load(""+sourceURL+"");
    }
</script>

space上記では、要素の innerHTML に が含まれているかどうかをテストしていid of contentます。

jQuery は .html() または .text() を使用してコンテナー内に保持されているデータと比較するため、jQuery の原則を使用して維持したい場合は、この行を変更します。同じ思考プロセスをたどって、あなたは前にIF声明を準備していますelementdocument is actually ready and loaded.

document.ready 関数を の に移動する必要がありoutsideますif statement。これにより、要素が DOM で使用可能であることを確認でき、実際にこの要素に対してチェックを実行できます。

<script type="text/javascript">
  $(document).ready(function(){ 
    if ($('#content').html("")){
        $('#content').load('main_text.html');
    }
  });
</script>

また、すぐに提供され、完全に機能しますが、$.ajax代わりに を使用することから始めることをお勧めし$.get / $.postます。なぜそう思うかについては個人的な好みがありますが、それについては触れません。

$.ajax({
  url: "Functions/search.php",
  type: 'POST',
  data: "search_term="+search_val,
  success: function(data){
    if (data.length>0){ 
      $("#search_results").html(data); 
    } 
});

最後に、 ではなく を使用する必要がありGET methodますPOST method。REST/SOAP プラクティスに基づいて、サーバーからデータを取得していて、データをサーバーに投稿していません。これら 2 つの単純な考え方に従うのがベスト プラクティスです。これは、Web サーバーがデータを解釈するのに苦労するからではありません。代わりに、大規模なアプリケーションの展開や将来のチーム環境での作業に備えるためのものです。このようにして、チームの全員が、どの方法がどのような目的で使用されるかについて期待を持ちます。

とにかく、簡単に言えば、ブラケットsemicolonsの終わりも省略します。closing })これは問題ではなく、開発に欠陥が生じることもありませんが、coding is all about uniformity. ;他のどこでもクロージングを使用しているので、同じ統一されたデザインを維持するようにしてください.

幸運を祈ります。

于 2012-06-06T18:39:03.450 に答える