如何使用Vue.js向API发送输入框数据并在Laravel中通过request接收

错误原因说明 #

你之前的写法存在两处问题：

1. FormData构造函数的入参需要是完整的<form> DOM节点，传入单个输入框元素无法正常收集字段值
2. 将FormData实例嵌套在普通对象中作为请求参数时，前端请求库不会自动序列化FormData内容，导致参数无法正常传递

方案1：直接获取输入框值传递（适合表单字段少的场景） #

首先给输入框添加id属性用于DOM选择：

<input type="text" id="delivery_time" name="delivery_time" value="insert delivery time">

修改请求代码，直接把输入框值加到请求参数中：

// 获取输入框值
const deliveryTime = document.getElementById('delivery_time').value;
this.$http.post("{{ route('shop.checkout.save-order') }}", {
    '_token': "{{ csrf_token() }}",
    'delivery_time': deliveryTime
})
.then(function (response) {
    if (response.data.success) {
        window.location.href = response.data.redirect_url || "{{ route('shop.checkout.success') }}";
    }
})

这个方案下，在Laravel中直接调用request('delivery_time')即可获取到参数值。

方案2：FormData标准写法（适合后续要新增多个表单字段的场景） #

首先将所有表单字段包裹在form标签内：

<form id="checkout_form">
    <input type="text" name="delivery_time" value="insert delivery time">
    <!-- 其他表单字段都可以放在这里 -->
</form>

修改请求代码，直接传递FormData实例即可：

const formData = new FormData(document.getElementById('checkout_form'));
formData.append('_token', "{{ csrf_token() }}");
// 直接传formData作为请求体，不要嵌套在普通对象中
this.$http.post("{{ route('shop.checkout.save-order') }}", formData)
.then(function (response) {
    if (response.data.success) {
        window.location.href = response.data.redirect_url || "{{ route('shop.checkout.success') }}";
    }
})

这个方案同样可以在Laravel中用request('delivery_time')直接获取参数。

内容的提问来源于stack exchange，提问作者Farshad