POST提交数据的方式

POST提交数据的方式

最近第一次使用vuejs做前端,用axios库来做表单的提交,结果发现php后台的$_POST是一个空数组,无法获取提交过来的数据。

查了一下,发现这个前端POST提交数据的方式有关。

1. 默认的application/x-www-form-urlencoded方式

使用html原生的<form>标签,并且不设置enctype属性,那么表单数据就会默认以application/x-www-form-urlencoded方式提交。

这时候可以看一下请求头的Content-Type:

屏幕快照 2017-09-25 上午9.24.17

这样,在php后台使用$_POST就能得到用户提交的表单数据。echo $_POST[‘fname’];

另外如果使用传统jquery的$.ajax来提交form表单,默认也是以application/x-www-form-urlencoded方式来提交,所以使用$.ajax时候经常要将表单变量$(“#form_name”)序列化(serilize)

2. application/json

application/json这个方式作为响应头的Content-Type必定大家都不陌生,因为我们经常要从后端返回json数据。但随着现在前端技术的发展,尤其像AngularJS、Vue.js框架的应用,json数据经常也会被用作请求来发送。比如下面这段AngularJS代码

或者在Vue.js中使用axios库发送表单时候:

都是以application/json作为Content-Type来post数据的。

屏幕快照 2017-09-25 上午9.23.42

但有些后端语言还无法很好的支持这种方式,比如我们用的php 5, php7。这时候使用var_export($_POST, true)得到的将会是一个空数组。需要自己从php://input流中获取原始输入流,再json_decode成json对象。

这是从后端适配前端的方法,当然还有直接修改前端发送方式的方法,让Angular或者Vue使用x-www-form-urlencoded方式提交数据。

以Vue.js的axios为例,参考axios – Using application/x-www-form-urlencoded format

屏幕快照 2017-09-25 上午10.13.20

这时候我们在看请求头的Content-Type,就能发现已经是传统的x-www-form-urlencoded方式了,php后端也能正常的从$_POST获取提交的数据。

3. form标签的其他enctype属性(multipart/form-data, text/plain)

暂时没见到,不做赘述了。以后遇到再说。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注