Ajax + PHP simple data interaction and ajaxphp Interaction

Ajax + PHP simple data interaction and ajaxphp Interaction

PHP is a server-side scripting language for creating dynamic and interactive sites. Its advantages are: PHP scripting language is widely used and open-source is free of charge. The most important thing is that it is easy to get started.

PHP can generate dynamic page content

PHP can create, open, read, write, delete, and close files on the server.

PHP can receive form data

PHP can send and retrieve cookies

PHP can add, delete, and modify data in the database

PHP can restrict user access to some pages on the website

It can run on various platforms and is compatible with almost all WEB servers and supports multiple databases.

1. To run PHP, we must first have a web server. Generally, we can deploy a server locally for testing. Therefore, we need to download an XAMPP file. We search for apache friends on Baidu and open the first link directly. Then, we do not hesitate to download the latest version (PHP7.0.9), and then install it.

2.

2. Now configure XAMPP to deploy a local server. To enable it, you only need to enable the Apache service. Then I will start it successfully. If the Port (s) is not successfully enabled and no data is displayed, the PC Port you are listening for is occupied. You can change the listening Port in the first option of Config, find the Listen 8080 command in notepad and change the suffix. Here, I changed the listening port to idle 8080.

3. Open Dreamweaver to create a server site. Site configuration: Make sure to select the htdocs directory where the Xampp path is installed in the local site folder.

4. Add Server Configuration:

In this way, the site is configured and server. php is created in the site folder. The script is as follows:

<? Php // set the page Content to html encoded in the format of UTF-8 // header ("Content-Type: text/plain; charset = UTF-8 "); header ('access-Control-Allow-Origin: * '); header ('access-Control-Allow-Methods: POST, get '); header ('access-Control-Allow-Credentials: true'); 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: appli Cation/javascript; charset = UTF-8 "); // defines a multi-dimensional array that contains employee information, each employee information is an array $ staff = array ("name" => "Jobs", "number" => "101 ", "sex" => "male", "job" => "IOS development engineer"), array ("name" => "Bill Gates ", "number" => "102", "sex" => "male", "job" => "Microsoft Development Engineer "), array ("name" => "Chen Mei", "number" => "103", "sex" => "female ", "job" => "android Development Engineer"), array ("name" => "Huang Li", "number" => "104 ", "sex" => "male", "job" => "Java Development Engineer"), array ("name" => "Che Shen", "number" => "105", "sex" => "male", "job" => "Game Development Engineer "), array ("name" => "test cat", "number" => "106", "sex" => "male ", "job" => "web Front-end development engineer"); // you can search for a get request or POST request, the newly created // $ _ SERVER is a super global variable and is available in all scopes of a script, you do not need to use the global keyword // $ _ SERVER ["REQUEST_METHOD"] to return the request method if ($ _ SERVER ["REQUEST_METHOD"] = "GET") used to access the page ") {search ();} elseif ($ _ SERVER ["REQUEST_METHOD"] = "POST") {create () ;}// search for employee function search by employee ID () {// Check whether there are employee ID parameters // isset check variables are set; whether the empty value is null or not. // The Super global variables $ _ GET and $ _ POST are used to collect form data if (! Isset ($ _ GET ["number"]) | empty ($ _ GET ["number"]) {echo '{"success": false, "msg ": "parameter error"} '; return;} // variables declared outside the function have a Global scope and can only be accessed outside the function. // The global keyword is used to access the global variable global $ staff in the function; // obtain the number parameter $ number = $ _ GET ["number"]; $ result = '{"success": false, "msg": "No employee found. "} '; // Traverse the $ staff multi-dimensional array to check whether the employee whose key value is number exists. If yes, modify the returned result foreach ($ staff as $ value) {if ($ value ["number"] = $ number) {$ result = '{"success": true, "msg": "locate EMPLOYEE: employee ID :'. $ value ["number"]. ', employee name :'. $ value ["name"]. ', employee gender :'. $ value ["sex"]. ', employee position :'. $ value ["job"]. '"}'; break;} echo $ result;} // create employee function create () {// determine 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 '{"success": false, "msg ": "parameter error. The employee information is incomplete."} '; return;} // TODO: Get the POST form data and save it to the database. // The system prompts that the data is saved successfully. echo' {"success ": true, "msg": "Employee :'. $ _ POST ["name"]. 'The information is saved successfully! "} ';}?>

We can query the data in the number of staffs in the server.php file, and create the demo.html

<Style> body, input, button, select, h1 {font-size: 20px; line-height: 18px ;}</style> <script> window. onload = function () {document. getElementById ("search "). onclick = function () {// query data // send Ajax query request and process var request = new XMLHttpRequest (); // open ("method (GET query, add POST) "," opened file data ", processing method (synchronous to false asynchronous to true, default to true if not filled); request. open ("GET", "server. php? Number = "+ document. getElementById ('keyword '). value); request. send (); request. onreadystatechange = function () {if (request. readyState = 4) {// when the server request is complete if (request. status = 200) {// status = 200 is the success of the server request var data = JSON. parse (request. responseText); if (data. success) {// fill in the required document for data. getElementById ('searchresult '). innerHTML = data. msg;} else {// The data is not signed. document is required. getElementById ('searchresult '). innerHTML = "error:" + data. msg ;}} else {// server request failed alert ("error:" + request. status) ;}}} document. getElementById ("save "). onclick = function () {// Add data // send Ajax add data request and process var request = new XMLHttpRequest (); // open ("method (GET query, POST add) "," opened file data ", processing method (synchronous to false asynchronous to true, default to true if not filled); request. open ("POST", "server. php "); // define data to get the data filled in by the user, and send (data) to the server var data =" name = "+ document. getElementById ("staffName "). value + "& number =" + document. getElementById ("staffNumber "). value + "& sex =" + document. getElementById ("staffSex "). value + "& job =" + document. getElementById ("staffJob "). value; request. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); // required in the POST method; otherwise, adding data does not work in the request. send (data); request. onreadystatechange = function () {if (request. readyState = 4) {// when the server request is complete if (request. status = 200) {// status = 200 is the success of the server request var data = JSON. parse (request. responseText); if (data. success) {// fill in the required document for data. getElementById ('createresresult '). innerHTML = data. msg;} else {// The data filled in does not meet the required document. getElementById ('createresresult '). innerHTML = "error:" + data. msg ;}} else {// server request failed alert ("error:" + request. status) ;}}}</script> <body> 

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.