ajax学习二——从表单提交中了解前后端数据交互

2018-6-13    seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一直不太懂前后端的交互，开始学习ajax，好像有些懂了，接下来的内容通过表单提交来了解前后端数据交互吧~

关于表单的基本知识：

表单中的三个内容：

    action：数据提交的地址，默认是当前页面

    method：数据提交的方式，默认是get方式

    enctype：提交数据格式，默认是application/x-www-form-urlencoded

以下分两种提交方式进行：

（1）get方式：

前端页面：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6. </head>  
  7. <body>  
  8. <form action="get.php" method="get">  
  9.     <input type="text" name="userName"/>  
  10.     <input type="submit" value="提交"/>  
  11. </form>  
  12. </body>  
  13. </html>      

后端php页面：

[php] view plain copy
  1. <?php  
  2. header('content-type:text/html;charset="utf-8"');//返回头  
  3. error_reporting(0);  
  4.   
  5. $userName=$_GET['userName'];//主要这里要对应提交的方式，如果表单使用的是get方式则后端需要用get，如果是使用post，则后端需要使用post  
  6.   
  7. echo "你的名字：{$userName}";  

输入“aa"提交后：

使用get方式：

把数据名称和值通过”=“连接，如果又多个的话，会通过”&“进行连接，然后把数据放到url?后面传到指定页面；

url长度又限制，所以不要使用get方式传递过多的数据

(2)post方式：

前端页面：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>表单提交方式2，post</title>  
  6. </head>  
  7. <body>  
  8. <form action="post.php" method="post">  
  9.     <input type="text" name="userName"/>  
  10.     <input type="submit" value="提交"/>  
  11. </form>  
  12. </body>  
  13. </html>  

后端php页面：

[php] view plain copy
  1. <?php  
  2. header('content-type:text/html;charset="utf-8"');  
  3. error_reporting(0);  
  4.   
  5. $userName=$_POST("userName"); //注意这里的要和提交的方式对应  
  6. echo "你的名字：{$userName}";  

输入”li“提交后：

post理论上是无传输大小限制的，输入的内容也不会显示在浏览器输入栏中。

就暂时了解这么多了~继续加油！

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

分享本文至：
« 2018年UI设计趋势概览 多伦多订餐APP-懒洋洋 »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档