もう一週間 - AJAX (3)

こんにちは、また約束を破りましたが、恥ずかしげもなく戻ってきました。 。 。 1. Ajax (3) 3. AJAX の簡単な例 3.1 導入完了: 従業員情報のクエリ、従業員番号 + 新入社員の情報 (従業員名、番号、性別、役職など) を入力して従業員の基本情報をクエリします。 実装: 純粋な HTML ページ。 + 従業員のクエリに使用される php ページ

こんにちは

また約束を破ってしまいましたが、恥ずかしげもなく戻ってきました。 。 。

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

$staff = array

(
array("name" => "Hong Qi", "number" => "101" , "性別" => "男性", "職業" => "部長"),
array("名前" => "郭晶", "番号" => "102", "性別" = > ; "男性", "職種" => "開発エンジニア"),
array("名前" => "黄栄", "番号" => "103", "性別" => "女性" , "仕事" => "プロダクト マネージャー")
);

//get リクエストであるかどうかを判断し、POST リクエストである場合は新しいリクエストを作成します

//$_SERVER はスーパー グローバル変数であり、スクリプトのすべてのスコープで使用できるため、global キーワードを使用する必要はありません

/ /$_SERVER["REQUEST_METHOD"] は、ページへのアクセスに使用されるリクエスト メソッドを返します
if ($_SERVER["REQUEST_METHOD"] == "GET") {
search();
} elseif ($_SERVER["REQUEST_METHOD] "] == "POST"){
create();
}

//従業員番号で従業員を検索

function search(){

//従業員番号のパラメーターがあるかどうかを確認します
//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 クライアント実装

明日話しましょう。 。 (また幻想世界録を思い出して気が散ってしまいました…)