Home > Developer > Web Develop
1.
The front end of the web is sillyOriginal December 25, 2016 19:50:08?? c Development for nearly six years, basically did not contact the web-related things, the original listening to others said that the web-related things when it is not clear which is the front end which is the background, front-end and the background is how to cooperate with the work? Many similar questions were finally made clear after a search by the parties.
?? Using HTML, JavaScript is written in the Web front-end, it does not have to the server (such as Apache, Nginx, Tomcat, etc.) on the browser end of the execution, such as the use of JavaScript pop up a warning box effect. While PHP, Python, and so on is the background language, when the browser to the server to send access to PHP file requests (such as: http://localhost:63342/php_basic/ helloworld.php), the Web server received the request, found that the PHP code is given to the PHP parser to complete the parsing, and then sent back to the Web server, and finally back to the browser.
?? This article will briefly describe the workflow of the front-end and the background, as well as the use of Get and post methods.
?? The following code demonstrates the front-end and background mate workflow.
Get mode<! DOCTYPE html><Html><Head><Metahttp-equiv="Content-type"Content="Text/html; Charset=utf-8 "/><Title></Title><Metacharset="Utf-8"/><ScriptType="Text/javascript"Src="Process.php" ></Script><Script> functionInputcheck(){var user = document.getElementById ("User");if (user.value=="") {alert ("User name is empty!" ");ReturnFalse }var pwd = document.getElementById ("Password");if (pwd.value=="") {alert ("The password cannot be empty!" ")ReturnFalse } }</Script></Head><Body><FormName="MyForm"Method="Get"action="Process.php" ><LabelFor="User" > Username</Label><InputType="Text"Id="User"Name="User"Value="User" ><br/><LabelFor="Password" > password</Label><InputType="Password"Id="Password"name= "password" value= "password" > <br/> <input type= "submit" id= "submit" name=" submit "value= "submit" onclick= "return InputCheck () "> </form></ body></HTML> ?? The From method defines the commit method as get, the data is passed to the background when the "submit" button is clicked, the JavaScript function is called to InputCheck() Check if the input box is empty, and if it is empty, the message is no longer sent to the server.
?? When the two input boxes have content, click the "Submit" button will send the data to the background, and specifically which PHP is specified by the action in the form, where the process.php,process.php code is specified as shown below.
<?php/** * Created by Phpstorm. * User:sweird * Date: 2016/10/10 * time:22:18 */header ( "Content-type:text/html;charset=utf-8"); //support Chinese $user =$_get[ "user"; $pwd =$_get[ "password"];echo "This is a message returned from the Web server that has been processed by PHP!" <br/> "; echo "The user name you submitted is:", $user, "<br/>"; echo "The password you submitted is:", $pwd; ?> ?? below to see the effect of the operation, this time using phpstorm development, after the code is written, click on the top right corner of the Firefox browser icon.
?? Now jump to Firefox, press F12 to open the Debug window and switch to the Web interface.
?? Then clear the User name input box content, and then click "Submit", then triggered the JavaScript code out of a warning window, and found in the "Network" Interface debugging window and no data, indicating that at this time did not send data to the server, but at the front end of the JS test.
?? Then enter the data in the User name input box and click Submit.
?? At this point in the address bar found that the process.php has been executed, and display the user name and password, and the data displayed in the browser is the background PHP code printed out, so that the front-end and background operation has been demonstrated.
?? Here's another look at how PHP gets the data sent from the front end when using the Post method.
?? From the above using the Get method can be seen, how to submit to the server-like password such sensitive information, then is very non-confidential, because in the URL shows the password, then the best way is to post to the background to submit data, Post does not explicitly output the password, But you can still see the password if you open the Debug window.
?? However, when using post, you need to put the relevant PHP code in the Wamp www directory, otherwise you will receive the following error message:
?? Move PHP to the following directory, and then make sure the server starts normally:
?? Then manually enter it in the browser: http://localhost/post_demon.php
?? Click "Submit" to see the following successful interface:
The post_demon.php code is as follows
<! DOCTYPE html><Html><Head><Metahttp-equiv="Content-type"Content="Text/html; Charset=utf-8 "/><Title></Title><Metacharset="Utf-8"/><ScriptType="Text/javascript"Src="Process_post_data.php" ></Script></Head><Body><FormName="MyForm"Method="POST"action="Process_post_data.php" ><LabelFor="User" > Username</Label><InputType="Text"Id="User"Name="User"Value="User" ><br/><LabelFor="Password" > password</Label><InputType="Password"Id="Password"name= "password" value= "password" > <br/> <input type= "submit" id= "submit" name=" submit "value= "submit" onclick= "return InputCheck () "></form></ body></HTML> The process_post_data.php code is as follows:
<?php/** * Created by PhpStorm. * User:sweird * DATE:2016/10/13 * time:21:30 */header ( "Content-type:text/html;charset=utf-8 "); $name =$_post[ "user"]; $pwd =$_post[ "password"];echo "This is a message returned from the Web server that has been processed by PHP!" <br/> "; echo "The user name you submitted is:", $name, "<br/>"; echo "The password you submitted is:", $pwd; ?> The back end of the Web front end foolishly confused,
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
