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) をアップグレードする詳細な手順

推薦する

Centos で MySQL パスワードを変更する方法

1. MySQL ログイン設定を変更します。 # vim /etc/my.cnf文を追加: skip...

JavaScriptは行削除機能を備えたテーブルを動的に生成します

この記事の例では、テーブルを動的に生成したり行を削除したりするためのJavaScriptの具体的なコ...

MySQLの空の値とnull値の違いを知っていますか?

序文最近、友人がSQLを書くときにnull値を判定する方法が間違っていて、プログラム内のデータにエラ...

CSSの省略記号とパディングを組み合わせた場合の問題の詳細な説明

CSS によるテキストの切り捨てテキストを自動的に切り捨てるスタイル コードを実装するには、次のコー...

nginxプロセスロックの実装の詳細な説明

目次1. nginxプロセスロックの役割2. エントリーレベルのロックの使用3. nginxプロセス...

docker ポートを追加して dockerfile を取得する方法

DockerイメージからDockerfileを取得する docker 履歴 --format {{....

Docker コンテナのデプロイの試み - マルチコンテナ通信 (node+mongoDB+nginx)

その理由はモッカー プラットフォームを導入したかったので、友人の勧めで既成のプロジェクト api-m...

Vue ベースの円形スクロールリスト機能を実装する

注: 親コンテナーに高さと :data='Array' および overfolw:h...

Founder フォント ライブラリの中国語と英語のファイル名比較表

Founder Type Library は、Founder Type Library ビジネス チ...

MySQLで一意のサーバーIDを生成する方法

序文MySQL では、server-id を使用してデータベース インスタンスを一意に識別し、それを...

ウェブサイトにファビコンを追加するためのヒント: URLの前の小さなアイコン

いわゆるファビコンは、Favorites Icon の略で、中国語ではウェブサイトアバターと呼ばれて...

ビジネス HTML メール作成に関する提案

許可ベースの電子メール マーケティングにより、マーケティングとプロモーションのコストを大幅に削減でき...

面接では、select...for update がテーブルをロックするのか、それとも行をロックするのか尋ねられました。

目次確認する:例の検証と組み合わせるselect クエリ ステートメントはロックされませんが、sel...

MySQL 5.7 MGR シングルマスター決定マスターノード方式の詳細説明

当銀行のMGRは年末に開始されます。公式文書を読んだり、毎日テストを受けたりしなければなりません。毎...

Reactは動的ポップアップウィンドウコンポーネントを実装します

UI コンポーネントを作成するときに、アニメーションを考慮しなければ、アニメーションを実現するのは非...