HTML に基づいてページを更新せずにフォーム送信を実装する

HTML に基づいてページを更新せずにフォーム送信を実装する
ページを更新せずにフォーム送信を実装するために Ajax を使用することは、プロジェクトでよく使用されます。少し前に、私は師匠から、主に iframe フレームワークに基づいた、フォームを更新せずに送信する方法をいくつか学びました。今、私はそれを整理してみんなと共有しました。
最初のもの:
(HTML ページ)

HTMLコードコンテンツをクリップボードにコピー
  1. <!DOCTYPE HTML>
  2. <html lang="ja- JP " >
  3. <ヘッド>
  4. <メタ文字セット= "utf-8" >
  5. <title>フォームを更新せずに送信</title>
  6. <スタイル タイプ = "text/css" >
  7. ul{ リストスタイルタイプ:なし;}
  8. </スタイル>
  9. </head>
  10. <本文>
  11. <iframe name= "formsubmit" style= "display:none;" >
  12. </iframe>
  13. <!-- フォーム送信ウィンドウを非表示の ifrmae にポイントし、ifrmae を通じてデータを送信します。 -->
  14. <フォームアクション= "form.php"メソッド= "POST"名前= "formphp"ターゲット= "formsubmit" >
  15. <ul>
  16. <li>
  17. <label for = "uname" >ユーザー名: </label>
  18. <入力タイプ= "テキスト"名前= "uname" ID= "uname" />
  19. </li>
  20. <li>
  21. <label for = "pwd" >パスワード:</label>
  22. <入力タイプ= "パスワード"名前= "pwd" id= "pwd" />
  23. </li>
  24. <li>
  25. <input type= "submit" value= "ログイン" />
  26. </li>
  27. </ul>
  28. </フォーム>
  29. </本文>
  30. </html>
  31.   
  32. (PHPページ: form.php)
  33.   
  34. <?php
  35. // 空でない検証  
  36. もし($_POST[ 'uname' ])が空なら || $_POST[ 'pwd' ])が空なら
  37. {
  38. echo '<script type="text/javascript">alert("ユーザー名またはパスワードが空です!");</script>' ;
  39. 出口;
  40. }
  41. //パスワードを確認する  
  42. ($_POST[ 'uname' ] != 'jack' || $_POST[ 'pwd' ] != '123456' )の場合
  43. {
  44. echo '<script type="text/javascript">alert("ユーザー名またはパスワードが正しくありません!");</script>' ;
  45. 出口;
  46. }それ以外{
  47. echo '<script type="text/javascript">alert("ログインに成功しました!");</script>' ;
  48. 出口;
  49. }


2番目のタイプ:
(HTML ページ)

HTMLコードコンテンツをクリップボードにコピー
  1. <!DOCTYPE HTML>
  2. <html lang="ja- JP " >
  3. <ヘッド>
  4. <メタ文字セット= "utf-8" >
  5. <title>iframe 送信フォーム</title>
  6. </head>
  7. <本文>
  8. <iframe name= "myiframe" style= "display:none;" onload= "iframeLoad(this);" ></iframe>
  9. <フォームアクション= "form.php"ターゲット= "myiframe"メソッド= "POST" >
  10. ユーザー名:<input type= "text" name= "username" /><br/>
  11. パスワード:<input type= "password" name= "userpwd" /><br/>
  12. <input type= "submit" value= "ログイン" />
  13. </フォーム>
  14. <スクリプトタイプ= "text/javascript" >
  15. 関数 iframeLoad(iframe){
  16. var doc = iframe.contentWindow.document;
  17. var html = doc.body.innerHTML;
  18. html != ''の場合{
  19. //取得したjsonデータをjsonオブジェクトに変換します  
  20. var obj = eval( "(" +html+ ")" );
  21. //返されたステータスを判断する  
  22. (obj.status < 1)の場合{
  23. アラート(obj.msg);
  24. }それ以外{
  25. アラート(obj.msg);
  26. window.location.href = "http://www.baidu.com" ;
  27. }
  28. }
  29. }
  30. </スクリプト>
  31. </本文>
  32. </html>

(PHPページ: form.php)

XML/HTML コードコンテンツをクリップボードにコピー
  1. <? php     
  2. //タイムゾーンを設定する
  3. date_default_timezone_set('PRC');
  4. /*
  5. 返されたコミットメッセージ
  6. ステータス: ステータス
  7. msg: プロンプトメッセージ
  8. */
  9. $ msg =配列('status'= > 0, 'msg'= > '');
  10. //送信されたデータを取得する
  11. $ name = $_POST['ユーザー名'];
  12. $ pwd = $_POST['userpwd'];
  13. //ログイン認証をシミュレートする
  14. $ユーザー=配列();
  15. $user['name'] = 'ジャック';
  16. $user['pwd'] = 'jack2014';
  17. $name != $user['name']){
  18. $msg['msg'] = 'ユーザーは登録されていません!';
  19. $ str = json_encode ($msg);
  20. $str をエコーし​​ます。
  21. 出口;
  22. }そうでない場合($pwd != $user['pwd']){
  23. $msg['msg'] = '入力したパスワードが間違っています!';
  24. $ str = json_encode ($msg);
  25. $str をエコーし​​ます。
  26. 出口;
  27. }
  28. $msg['msg'] = 'ログインに成功しました!';
  29. $msg['ステータス'] = 1;
  30. $ str = json_encode ($msg);
  31. $str をエコーし​​ます。

上記は、HTML ベースでフォーム送信後の非更新ページを実装する方法についてエディターが紹介したものです。お役に立てれば幸いです。

<<:  Mysqlサーバーのインストール、構成、起動、シャットダウン方法の詳細な説明

>>:  CentOS7 環境で gcc (バージョン 10.2.0) をアップグレードする詳細な手順

推薦する

vue $setは配列コレクションオブジェクトへの値の割り当てを実装します

Vue $set 配列コレクションオブジェクトの割り当てVue カスタム配列オブジェクト コレクショ...

入力ファイルのカスタムボタンの美化(デモ)

以前にも同じような記事を書いたことがありますが、js スクリプトを使用しており、ファイルパスを表示で...

MySQL 8.0.11 圧縮版のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0圧縮パッケージのインストール方法、詳細は次のとおりです知らせ:オペレーティング シ...

Docker-compose ワンクリックデプロイ gitlab 中国語版の方法手順

1. GitLabの紹介Gitlab 公式アドレス: https://about.gitlab.co...

MySQL での挿入効率のいくつかの例の比較

序文最近、仕事の都合で、約 1000w の大量のデータを MySQL に挿入する必要があり、時間がか...

MySQL で大文字と小文字を区別しないように設定する方法

mysql は大文字と小文字を区別しないように設定されていますウィンドウズmysqlがインストールさ...

回転するフリップカードアニメーションの効果を実現するCSS

回転フリップ効果の CSS アニメーション、具体的な内容は次のとおりです。 1. まず2つのボックス...

JavaScript の重要なブレークポイント デバッグ手法の概要 (推奨)

目次デバッガーを使用する理由は何ですか? Chromeデバッガーの基本的な使い方VS Code によ...

JS で単一ファイルコンポーネントを実装する方法

目次概要単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...

ブラウザは関連するHTTPヘッダーをキャッシュし、HTTPリクエストの数を最小限に抑えます。

最近、Yahoo の 34 の黄金律を読み、ウェブサイトのパフォーマンスを最適化する方法を学びました...

CSS で要素を中央揃えにする N 通りの方法

目次序文インライン要素の中央揃えテキストを垂直に中央揃え要素を水平方向に中央揃えにするブロックレベル...

単一選択折りたたみメニュー機能を実現するCSS

前回の「最もシンプルなスイッチを実現するCSS」のように、HTML5とCSS3でほとんどの機能をすで...

Nginx設定ファイルの詳細な説明

Nginx の主な設定ファイルは nginx.conf で、グローバル ブロック、イベント ブロック...

ノードの対応するバージョンに関する簡単な説明 node-sass sass-loader

目次ノードのバージョンが一致しない、ノードをアップグレードまたはダウングレードするnvm を使用して...