The previous chapter simply said the Wamp and configuration, I believe most of the students have been in accordance with the good, today formally talk about the value of HTML and PHP.
1, PHP to HTML value
2, the HTML to PHP value: Here can be divided into two parts to explain:
2.1, the common form form of the submission;
2.2. Pass the data to the backstage through Ajax.
1, PHP to HTML value
1.1, first, open Wamp, in the previous chapter configuration of the server root directory e:/work/phptest/new test.php files, our files are placed in the phptest.
1.2, we first test the Apache environment running PHP is configured successfully, see if you can run the test.php file.
<? php echo "Hello World"; ?>
Save the code, open the browser, and enter the configuration server address that is configured in the previous chapter: myserver.com/test.php
If the browser displays the above English, it means that the Apache environment running PHP is feasible.
Note: If the kanji output is at the top, add a piece of code:
Header ("content-type:text/html; Charset=utf-8 ");1.3, create a new test.html in Phptest, this HTML is used to receive data from test.php.
<!DOCTYPE HTML><HTMLLang= ' en '> <Head> <MetaCharSet= ' UTF-8 '> <Metaname= ' viewport 'content= ' Width=device-width,Initial-scale=1,Maximum-scale=1,user-scalable=no '> <Metahttp-equiv= ' x-ua-compatible 'content= ' Ie=edge '> <Metaname= ' keywords 'content= ' '> <Metaname= ' description 'content= ' '> <title>Document</title> <Scriptsrc= "Http://code.jquery.com/jquery-1.11.3.min.js"></Script> </Head> <Body> <Script>$.get ("./test.php", function(data) {Console.log (data); }) </Script> </Body></HTML>
Here I used the jquery plugin, concise and intuitive, if interested students, you can try to write with native Ajax.
We can see "Hello World" printed on http://myserver.com/PHPtest/test.html 's console, which means the data has been transferred to test.html the.
Note: getting data typically uses a GET request, and submitting data typically uses a POST request .
1.4, of course, the actual work in the background is not possible to transmit such a simple sentence, often nested arrays or objects such as JSON data, then they how to pass it?
1.4.1, in fact, this transmission is the same, the author is the most simple echo transmission, as long as the required data compression encoded into a string, the front-end to request to receive it.
1.4.2, for the front-end how to deal with this JSON data, very simple, the next one to explain.
1.4.3, first of all, write the test.php file, we re-write it again.
<? PHP // Creation of arrays in PHP $arr Array ("Name" = "Jeck", "Age" = "a", "gender" = "male"); // echo can be followed by parentheses, you can not use //pass the data must be a string, need to encode with Json_encode echo json_encode ($arr);? >Let's refresh it again, the previous page shows that the console displays a string in the form of an Josn object, and if you use it in test.html, you must use json.parse () to turn the string into an object.
Again, if not a single group number, nested arrays or objects:
<?PHP//creation of arrays in PHP $arr=Array("Name" = "Jeck", "Age" = "a", "gender" = "male"); //a new array is combined using a repeating definition array. $json = Array ("id" + 0, "item" = = $arr); The form of the array can be freely paired with//$json = array ("id" = + 0, "item" = = Array ("Jeck", "male"); Directly in the new array, directly define the $json=Array("id" = 0, "Item" =Array("Name" = "Jeck", "Age" = "a", "gender" = "male")); //echo can be followed by parentheses, you can not use//pass the data must be a string, need to encode with Json_encode EchoJson_encode ($json);?>
To refresh the page, you can see in the console:
These are some simple combinations of PHP, interested students can try complex combinations, in PHP to add elements to the array using the function is: array_push () This method is very useful.
1.4.4, let's talk about how to use this data in test.html:
<! DOCTYPE html> $. Get ("./test.php",function(data) {//first, you need to decode Json.parse (data) varres = JSON.parse (data); //You can print it out and take a look.Console.Log(RES); //simple splicing, without template engine, if it is a repeating class of data, need to loop, recommend the use of template engine varTxtstr = "My name is" + Res.item.name + ", I am" + Res.item.gender + "," + Res.item.age + "years old."; //Create a new label p to place the Txtstr$ ("#text").html (TXTSTR); }) </script> </body>Refresh the page, you can see the page will appear this line:
PHP to the HTML value is basically the case, the next chapter on the HTML to PHP value
About Wamp's HTML, PHP, MySQL operations and connections-value between HTML and PHP (UP) (ii)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
