Another week-AJAX (3)

hi I broke my promise again, but I came back shamelessly. . . 1. Ajax (3) 3. Simple example of AJAX 3.1 Introduction completed: Query employee information, query basic information of employees by entering employee number, create new employee information, including employee name, number, gender, position; Implementation: pure HTML page php page, used to query employees

hi

I broke my promise again, but I came back shamelessly. . .

1. Ajax (3)

3. A simple example of AJAX

3.1 Introduction

Complete: Query employee information, query the employee's basic information by entering the employee number. Create new employee information, including employee name, number, gender, position;

Implementation: pure html page and php page, used to implement the backend interface for querying employees and creating new employees;

3.2 Server-side implementation

I am using the wamp collection end here, so many things do not need to be changed.

Then write the program in adobe dreamwaverCs6

--DW

Installation is available online.

Build the site first, put it in the www folder, and then adjust the server and other things yourself.

Specifically, the site is a folder, just under the apache folder, and remember to write down the server address clearly. Before finally saving, you need to cancel the remote control and check Test. I’m too lazy to post pictures, the basic steps are very simple.

The rest is the content of php.

--php code

No longer give step by step, just give it directly.

//Set the page content to html and the encoding format is utf-8
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");

//Define a multi-dimensional array containing employee information. Each employee information is an array
$staff = array
(
array("name" => "Hong Qi", " number" => "101", "sex" => "Male", "job" => "General Manager"),
array("name" => "Guo Jing", "number" = > "102", "sex" => "Male", "job" => "Development Engineer"),
array("name" => "Huang Rong", "number" => " 103", "sex" => "Female", "job" => "Product Manager")
);

//Determine if it is a get request, search; if it is a POST request, create a new one
//$_SERVER is a super global variable, available in all scopes of a script, no need to use global Keyword
//$_SERVER["REQUEST_METHOD"] returns the request method used to access the page
if ($_SERVER["REQUEST_METHOD"] == "GET") {
search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
create();
}

//Search for employees by employee number
function search(){
//Check whether there is a parameter for employee number
//isset detects whether the variable is set; empty determines whether the value is empty
//Super global variables $_GET and $_POST are used to collect form data
if (!isset($_GET["number"]) || empty($_GET["number"])) {
echo "Parameter error";
return;
}
//Variables declared outside the function have Global scope and can only be accessed outside the function.
//global keyword is used to access global variables within the function
global $staff;
//Get the number parameter
$number = $_GET["number"];
$result = "No employee found.";

//Traverse the $staff multidimensional array to find whether the employee with key value number exists. If it exists, modify the return result
foreach ($staff as $value) {
if ($value["number"] == $number) {
$result = "Employee found: employee number: " . $value["number"] . ", employee name: " . $ value["name"] .
", employee gender: " . $value["sex"] . ", employee position: " . $value["job"];
break;
}
}
echo $result;
}

//Create an employee
function create(){
//Judge whether the information is completely filled in
if (!isset($_POST["name"]) || empty($_POST["name "])
|| !isset($_POST["number"]) || empty($_POST["number"])
|| !isset($_POST["sex"]) || empty ($_POST["sex"])
|| !isset($_POST["job"]) || empty($_POST["job"])) {
echo "Wrong parameter, fill in employee information Incomplete";
return;
}
//TODO: Get the POST form data and save it to the database

//Prompt that the save was successful
echo "Employee:" . $_POST[ "name"] . "Information saved successfully!";
}

--Server-side testing

Achieved through tools - fiddler.

On the main page of fiddler, there is a composer tab on the right;

Then select the GET method, write the address of our file - localhost/AjaxDemo/server.php, and click execute/execute;

The parameters are wrong when returning, because we don’t get any data; follow the address? number=101, execute it again, you should be able to see the details of 101, the file is correct;

Then select the POST method again; then you don’t need to fill in the parameters in the address column, but you need to write Content-Type: application/x-www-form-urlencoded below to tell the server what to do. . Write the data at the bottom, execute it, and it will be saved successfully.

After testing, if there is any problem, just go and correct it.

The lesson here is that in web development, when testing back-end development, do not rely on front-end development and complete it independently first.

3.3 Client implementation

Let’s talk tomorrow. . (I was distracted again by recalling Fantasy World Records...)