0、概述
本demo實現以下功能：
①在html頁面輸入姓名和郵箱，點擊提交（這里為get）
②服務器通過解析表單內容，返回對“姓名”和“郵箱”的一個歡迎頁面
1、軟件准備
①xampp
作用：提供apache服務
②webStorm
作用：編輯html、php代碼
2、服務器准備
進入xampp的hotdocs目錄，如圖：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> Welcome <?php echo $_GET["name"]; ?><br> Your email address is: <?php echo $_GET["email"]; ?> </body> </html>
3、web前端准備
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="jqm/jquery.mobile-1.4.5.min.css"> 6 <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script> 7 <script type="text/javascript" src="jqm/jquery.mobile-1.4.5.min.js"></script> 8 <script type="text/javascript" src="js/app.js"></script> 9 </head> 10 11 <body> 12 <div data-role="page"> 13 <div data-role="header"> 14 <h1>header in page</h1> 15 </div> 16 <div class="ui-content"> 17 <form action="http://172.163.0.195:8888/index.php" method="get"> 18 Name: <input type="text" name="name"><br> 19 E-mail: <input type="text" name="email"><br> 20 <input type="submit" value="提交"> 21 </form> 22 </div> 23 24 <div data-role="footer" data-position="fixed"> 25 <h1>footer</h1> 26 </div> 27 </div> 28 29 </body>
注意上述代碼的17行中的"http://172.163.0.195:8888"要替換成你自身的ip地址和端口號（端口號是在xampp中設置的）
4、運行
①運行xampp的apache服務，這里注意端口號要和代碼中的保持一致
②運行webstorm代碼
③在瀏覽器中填寫name和email，提交，然后看php返回結果是否一致，（demo完畢）