静的HTMLページに動的コンテンツを含めることはできませんか?もう一度考えてみてください!

画像

 
静的ページを一緒に定義しましょう。つまり、「ページに表示される情報はストレージ構造とまったく同じです」。したがって、データベース情報を表示する動的ページを作成する場合は、.php / .aspx / .jsp /.servletなどのサーバー側言語レンダリングを使用する必要があります。

Web開発者として、「HTMLは速い」、「HTMLは動的コンテンツを表示できない」などとよく耳にします。これは理にかなっているように聞こえますが、完全に正しいわけではありません。

以下では、HTMLページが実際には静的ページではない理由について説明します。

動的処理に

HTMLページを使用するインタラクティブな操作にHTMLページを使用しましょう。ここでは、ユーザーサブスクリプション関数を作成します。ご存知のとおり、この関数はインターネット上で非常に一般的です。

インタラクティブ機能の説明は次のとおり

です。ページにメールテキスト入力フォームと送信ボタンがあります。ユーザーがTAのメールボックスに入り、送信ボタンをクリックすると、メールがデータベーステーブルに保存され、ユーザーは受信します。ありがとうメッセージ。

HTMLページコードは次のとおりです。


<input id = "email" placeholder = "your email address" /> 
<button id = "submit">送信</ button> 
<div id = "message"> </ div>


注:返されたプロンプトメッセージ「ありがとう」は、メッセージのDIVに表示されます。

静的ページを静的にする

次に実行したいのは、データに電子メールを挿入して感謝メッセージを表示する方法です。JQueryライブラリを使用して実行します。

キャプチャイベントを使用し、イベントでJQueryのAjaxメソッドを呼び出し、メールアドレスをPHPスクリプトに投稿するだけです。

以下は、JQueryコードです。


$("#submit").click(function (e) {    
    $.ajax({
        type: "POST",
        url: "result.php",
        contentType: "application/json; charset=utf-8",
        data: '{"email":"' + $("#email").val() + '"}',
        success: function (msg) {
                $("#message").html(msg);
        },
        error: function (req, status, error) {
            alert(req + " " + status + " " + error);
        }
    });
    return false;
});


説明のために、上記のJQueryメソッドでは、URLのキー値をresult.phpページに渡します。このページは、電子メールのコンテンツを受信します。

つまり、データの価値です。詳細については、CarbonのAjaxコードを参照してください。ユーザーのメールはkey-valueで送信されます。

Ajaxリクエストが完了すると、PHPはコールバック関数に成功を返します。PHPページからコールバック関数が受け取った値をメッセージdivに書き込みます。

Ajax呼び出し中にエラーが発生した場合、「エラー」セクションのコールバック関数が呼び出されます。

PHPページの内容は次のとおりです。


<?php  
$ email = $ _REQUEST ['email'];  
//データベースが挿入された場合、成功を返します
//成功しなかった場合、間違って返され

ます。再試行しますか?>


PHPスクリプトにいくつかのコードを保存しましたが、スマートリーダーはそれを自分で行うことができます。その主なタスクは、電子メールの値を受け取り、それをデータベースに挿入してから、成功メッセージを返すことです。

この時点で、コード部分はここで終了します。

さて、開発者がHTMLページを使用して動的コンテンツを表示することはできないと言った場合は、その人に丁寧に伝えてください。別の方法があります。

私たちはJQueryAjaxを使用しており、HTMLページはサーバーページのように機能し、人々はそれらを簡単に使用して、HTMLページを使用してあらゆるタイプのデータベースアプリケーションを直接作成できます。

皆さんがコーディングを楽しんでいることを願っています。このチュートリアルを気に入っていただくことを忘れないでください。


おすすめ

転載: blog.51cto.com/15127566/2665873