0

多くのチュートリアルやブログを読みましたが、コードに必要なものを実装できませんでした。誰かがこれについて私を助けることができますか?

私はウェブサイトを作成しようとしています。基本的な構造 (fields.html) には、2 つのテキスト フィールド X と Y と 1 つの送信ボタンが含まれています。(これら 3 つすべてが Form 内に配置されます)。基本的に、2 つのテキスト ボックスに値を入力して [送信] ボタンを押すと、値 (x と y) を取得するコードを記述した query.php(action=”query.php”) に接続されます。 ）fileds.htmlから、受け取った値（xとy）に基づいて、query.phpはデータベースからいくつかの値を取得し、echoコマンドを使用してそれらの結果を表示します）同じページに値のリストが表示されます。これにはJQueryを使用しました。

だからここに私の要件と私が直面している問題があります:

要件：

（単にページの機能が必要です： http ://nix.lv/history/demo.html （このページを右クリックすると、ページのソースを表示できます）しかし、このページでは静的ページをロードしています（アンカータブ経由） ) しかし、FIELDS.HTML からの値に基づいて動的に実行されている QUERY.PHP (単一の送信ボタンを介して) をロードしたい

A. テキスト ボックス (x と y) に値を入力するたびに、同じページに値が表示されるはずです (動作中の JQuery が使用されています)。B. 更新ボタンを押すたびに、既に表示されている結果が消えることはありません。単にページが更新され、結果が表示されるはずです.-（機能していません/実装方法がわかりません）。C. 例: fields.html の x および y テキスト ボックスに値を入力して、初めて結果セット 1 を取得しました。2 回目は、X と Y のテキスト ボックスに異なる値を入力し、同じ fields.html で結果セット 2 を取得しています (結果セット 2 は結果セット 1 を置き換えます)。ここで、戻るボタンを押すと、reslutset1 が取得されます。簡単に言うと、

問題：

  1. 更新ボタンが正しく機能していません。更新ボタンを押すと、既に表示されている結果がテキストボックスに入力された値とともに消えていきます.
  2. また、結果セットを取得した後、X および Y テキスト ボックスに新しい値を入力して [送信] ボタンを押しても、何も起こりません。-(動かない)
  3. また、期待どおりに正しく機能するには戻るボタンが必要です。- (これを実装する方法がわからない)

コード：

files.html:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>history plugin demo</title>

        <script type="text/javascript" src="jquery-1.2.3.min.js"></script>
        <script type="text/javascript" src="jquery.history.js"></script>

        <script type="text/javascript">
            var $j = jQuery.noConflict();
            var $ = {};
            // PageLoad function
            // This function is called when:
            // 1. after calling $.historyInit();
            // 2. after calling $.historyLoad();
            // 3. after pushing "Go Back" button of a browser
            function pageload(hash) {
                // hash doesn't contain the first # character.
                if(hash) {
                    // restore ajax loaded state
                    $j("#load").load(hash + ".php" , {X: $j("#ix").val(), Y: $j("#iy").val()});
                } else {
                    // start page
                    $j("#load").empty();
                }
            }

            $j(document).ready(function(){
                // Initialize history plugin.
                // The callback is called at once by present location.hash. 
                $j.history.init(pageload);

                // set onlick event for buttons
                $j("form[@rel='history']").submit(function(){
                    // 
                    var hash = this.action;
                    hash = hash.replace(/^.*#/, '');
                    // moves to a new page. 
                    // pageload is called at once. 
                    $j.history.load(hash);
                    return false;
                });
            });
        </script>
    </head>
    <body>
        Ajax load<BR>
            <form id="myForm" action='#query' method='POST' rel="history">
                X <BR>
                <input type="text" name="X" id="ix"><BR> <BR>
                Y <BR>                            
                <input type="text" name="Y" id="iy" > <BR> <BR>
                <input id= "sub" type="submit" value="Search" align="centre"/>
            </form>
        <hr>
            Loaded html:<BR>
            <div id="load"></div>
        <hr>

    </body>
</html>
4

1 に答える 1