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

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

HTMLコードコンテンツをクリップボードにコピー

<!DOCTYPE HTML>
<html lang="ja- JP " >
<ヘッド>
<メタ文字セット= "utf-8" >
<title>フォームを更新せずに送信</title>
<スタイルタイプ = "text/css" >
ul{ リストスタイルタイプ:なし;}
</スタイル>
</head>
<本文>
<iframe name= "formsubmit" style= "display:none;" >
</iframe>
<フォームアクション= "form.php"メソッド= "POST"名前= "formphp"ターゲット= "formsubmit" >
<ul>
<li>
<label for = "uname" >ユーザー名: </label>
<入力タイプ= "テキスト"名前= "uname" ID= "uname" />
</li>
<li>
<label for = "pwd" >パスワード:</label>
<入力タイプ= "パスワード"名前= "pwd" id= "pwd" />
</li>
<li>
<input type= "submit" value= "ログイン" />
</li>
</ul>
</フォーム>
</本文>
</html>
(PHPページ: form.php)
<?php
// 空でない検証
もし($_POST[ 'uname' ])が空なら || $_POST[ 'pwd' ])が空なら
{
echo '<script type="text/javascript">alert("ユーザー名またはパスワードが空です!");</script>' ;
出口;
}
//パスワードを確認する
($_POST[ 'uname' ] != 'jack' || $_POST[ 'pwd' ] != '123456' )の場合
{
echo '<script type="text/javascript">alert("ユーザー名またはパスワードが正しくありません!");</script>' ;
出口;
}それ以外{
echo '<script type="text/javascript">alert("ログインに成功しました!");</script>' ;
出口;
}

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

HTMLコードコンテンツをクリップボードにコピー

<!DOCTYPE HTML>
<html lang="ja- JP " >
<ヘッド>
<メタ文字セット= "utf-8" >
<title>iframe 送信フォーム</title>
</head>
<本文>
<iframe name= "myiframe" style= "display:none;" onload= "iframeLoad(this);" ></iframe>
<フォームアクション= "form.php"ターゲット= "myiframe"メソッド= "POST" >
ユーザー名:<input type= "text" name= "username" /><br/>
パスワード:<input type= "password" name= "userpwd" /><br/>
<input type= "submit" value= "ログイン" />
</フォーム>
<スクリプトタイプ= "text/javascript" >
関数 iframeLoad(iframe){
var doc = iframe.contentWindow.document;
var html = doc.body.innerHTML;
html != ''の場合{
//取得したjsonデータをjsonオブジェクトに変換します
var obj = eval( "(" +html+ ")" );
//返されたステータスを判断する
（obj.status < 1）の場合{
アラート(obj.msg);
}それ以外{
アラート(obj.msg);
window.location.href = "http://www.baidu.com" ;
}
}
}
</スクリプト>
</本文>
</html>