こんにちは
また約束を破ってしまいましたが、恥ずかしげもなく戻ってきました。 。 。
1. アジャックス (3)
3. AJAX
の簡単な例3.1 はじめに
完全: 従業員情報をクエリし、従業員番号と新しい従業員の情報 (従業員名、番号、性別、役職など) を入力して従業員の基本情報をクエリします。
実装: 純粋な HTML ページ + PHP ページ。従業員のクエリと新しい従業員の作成のためのバックエンド インターフェイスの実装に使用されます。 3.2 サーバー側の実装ここではワンプコレクションエンドを使用しているため、多くのことを変更する必要はありません。
次に adobe dreamwaverCs6 でプログラムを書きます
--DWインストールはオンラインで可能です。
最初にサイトを作成し、wwwフォルダーに配置します。その後、サーバーなどを自分で調整する必要があります。
具体的には、サイトは apache フォルダーの直下のフォルダーです。サーバー アドレスを明確に書き留めてください。最後に保存する前に、リモコンをキャンセルし、テストにチェックを入れる必要があります。写真を投稿するのがめんどくさいので、基本的な手順は非常に簡単です。
残りはphpの内容です。
--php コード段階的に与える必要はなく、直接与えるだけです。
//ページコンテンツをHTMLエンコード形式に設定します
header("Content-Type: text/plain;charset=utf-8");
//header("Content-Type: application /json;charset=utf-8");
//header("Content-Type: text/xml;charset=utf-8");
//header("Content-Type: text/html;charset= utf -8");
//header("Content-Type: application/javascript;charset=utf-8");
//従業員情報を含む多次元配列を定義します。各従業員情報は array
(
array("name" => "Hong Qi", "number" => "101" , "性別" => "男性", "職業" => "部長"),
array("名前" => "郭晶", "番号" => "102", "性別" = > ; "男性", "職種" => "開発エンジニア"),
array("名前" => "黄栄", "番号" => "103", "性別" => "女性" , "仕事" => "プロダクト マネージャー")
);
//get リクエストであるかどうかを判断し、POST リクエストである場合は新しいリクエストを作成します
/ /$_SERVER["REQUEST_METHOD"] は、ページへのアクセスに使用されるリクエスト メソッドを返します
if ($_SERVER["REQUEST_METHOD"] == "GET") {
search();
} elseif ($_SERVER["REQUEST_METHOD] "] == "POST"){
create();
}
//従業員番号で従業員を検索
//従業員番号のパラメーターがあるかどうかを確認します
//isset は変数が設定されているかどうかを検出し、値が空であるかどうかを決定します
//スーパーグローバル変数 $_GET および $ _POST は、フォーム データの収集に使用されます
if (!isset($_GET["number"]) || empty($_GET["number"])) {
echo "パラメーター エラー";
return;
}
//外部で宣言された関数変数はグローバル スコープを持ち、関数の外部でのみアクセスできます。
//グローバル キーワードは、関数内のグローバル変数にアクセスするために使用されます
global $staff;
//数値パラメータを取得します
$number = $_GET["number"];
$result = "従業員が見つかりません。";
// $staff 多次元配列を走査して、キー値番号を持つ従業員が存在するかどうかを確認します。存在する場合は、戻り結果を変更します
foreach ($staff as $value) {
if ($value["number"] ==) $number) {
$result = "従業員番号: " . $value["number"] . "、従業員名: " . $value["name"] . 従業員の性別: " . ["セックス "] . "、従業員の職位: " . $value["job"];
ブレーク;
}
}
echo $result;
}
//従業員を作成する
function create(){
if (!isset($_POST["name"]) || empty($_POST["name"])
|| !isset ($_POST["数値"]) 空($_POST["数値"])
|| !isset($_POST["性別"]) )
|| !isset($_POST["job"]) || empty($_POST["job"])) {
echo "パラメータが間違っています。従業員情報が不完全です";
return;
}
//TODO: POST フォームを取得 データがデータベースに保存されました
//保存が成功したことを確認するメッセージ
echo "Employee:" . $_POST["name"] "情報は正常に保存されました!";
}
-- サーバー側のテスト
ツール - フィドラーを通じて達成されます。
fiddler のメイン ページには、右側に Composer タブがあります次に、
GET メソッド
を選択し、ファイルのアドレス (localhost/AjaxDemo/server.php) を書き込み、[実行] をクリックします。データを取得できないため、返される際のパラメータが間違っています; address?number=101 に従ってください。もう一度実行すると、101 の詳細が表示されるはずです。ファイルは正しいです。 その後、再度
POST メソッドを選択すると、アドレス列にパラメーターを入力する必要はありませんが、サーバーに内容を伝えるために Content-Type: application/x-www-form-urlencoded を以下に記述する必要があります。すること。一番下にデータを書き込んで実行すると正常に保存されます。
テスト後、問題がある場合は、修正してください。
ここでの教訓は、Web 開発でバックエンド開発をテストするときは、フロントエンド開発に依存せず、最初に独立して完了する必要があるということです。
3.3 クライアント実装
明日話しましょう。 。 (また幻想世界録を思い出して気が散ってしまいました…)