使用html表单提交数组和json对象

Javascript 2020-01-14 阅读 140 评论 0

在html的表单 form 标签中,经常会用到input、select、checkbox、radio、textarea等标签,提交一些数据到后端,这些标签的name属性,会映射到服务器接收数据的key。如此,就可以巧妙地组织name属性的值,以中括号 [] 包含,构建成数组或者 json 的变量名,服务器就能直接得到 Array 或者 Map 对象。get、post方法都支持。

废话少说,请看以下的例子。

html 代码


<form action="/test.php" method="post">
    <div>
        <input type="checkbox" name="role[]" value="1" id="admin">
        <label for="admin">Admin</label>

        <input type="checkbox" name="role[]" value="2" id="publisher">
        <label for="publisher">Publisher</label>
    </div>
    <div>
        <input type="text" name="action[a]" value="select">
        <input type="text" name="action[b]" value="update">
    </div>
    <input type="submit">
</form>

查看浏览器发送的数据

如果是post方法,在google chrome查看 Form Data,如下图。

google chrome的表单值

如果是 get 方法,查看提交的url,表单数据自动被编码 encode。

/test.php?role%5B%5D=1&role%5B%5D=2&action%5Ba%5D=select&action%5Bb%5D=update

服务端得到的数据

后端语言 php 打印接收的数据。$_REQUEST 包含了 $_GET 和 $_POST 的变量。

print_r($_REQUEST);

如果role的2个checkbox都勾选上,将会输出

Array
(
    [role] => Array
        (
            [0] => 1
            [1] => 2
        )

    [action] => Array
        (
            [a] => select
            [b] => update
        )

)

总结

以上可以看出,name 为 role 的input,是一个数组,而name 为 action 的 input,实际上是代表一个json对象。

如果标签name属性值的中括号 []为数字,或者没有指定下标,表示数组;[]包含了非数字,表示键key,也就是json对象。

最后更新 2020-01-14