如何从Laravel服务器访问表单的输入数据

在下面的表格中输入图像描述

                  <form method="post" style="display: none;" encType="multipart/form-data" class="landLords1" name="addACourse" action="{{URL::to('/addACourse')}}">
                       {{ csrf_field() }}
                       <input type="text" placeholder="Course Title" name="title"><br>
                       <select name="duration" id="duration">
                           <option value="1 weeks">1 week</option>
                           <option value="2 weeks">2 weeks</option>
                           <option value="3 weeks">3 weeks</option>
                           <option value="4 weeks">4 weeks</option>
                           <option value="5 weeks">5 weeks</option>
                           <option value="6 weeks">6 weeks</option>
                           <option value="7 weeks">7 weeks</option>
                           <option value="3 months">3 months</option>
                           <option value="4 months">6 months</option>
                           <option value="5 months">5 months</option>
                           <option value="6 months">6 months</option>
                           <option value="7 months">7 months</option>
                           <option value="8 months">8 months</option>
                           <option value="9 months">9 months</option>
                           <option value="10 months">10 months</option>
                           <option value="11 month">11 months</option>
                           <option value="1 year">1 year</option>
                       </select><br>
                       <input type="text" placeholder="price" name="price"><br>
                       <input type="text" placeholder="Course Code e.g(ECN 504)" name="coursecode"><br>
                       <input type="text" name="author" placeholder="Authors names"><br>
                       <input type="file" name="picture" placeholder="select picture"><br>
                       <textarea name="desscription" id="textArea" cols="30" rows="10" placeholder="write a detail descripton of the content of the course you are creating, write a summary of the course. this content will be displayed went users click on the course"></textarea><br>
                       <button>submit</button><br>
                    </form> 

这是我的拉威尔控制器

<?php
namespace App\Http\Controllers;
use DB;
use Storage;
use Illuminate\Http\Request;
use Illuminate\Foundation\Bus\DispatchesJobs;
use Illuminate\Routing\Controller as BaseController;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Http\UploadedFile;

class AddACourseController extends BaseController
{
public function addACourse(Request $request){

    $value = $request->input('coursetitle');
    return response()->json(array('data' => $value), 200);
}
}

我一直在变空，请问我如何解决这个问题。 请不要回答使用JQuery来解决这个问题。

---

我希望答案仅用vanila javascript。

从您的屏幕截图和代码中可以看出，您实际上并没有向服务器提交任何数据

您的第一个屏幕截图在最底部讨论了请求有效负载。它稍微被截断了，但看起来您提交的是一个空表单。这意味着您的javascript找不到任何要发送的表单数据

回过头来看，您正在使用匿名函数（闭包）从eventlistener调用AddAcouse

当您在闭包中引用它时，您指的是闭包本身，而不是调用方。自然，闭包没有表单，因此您没有表单数据

theForm.addEventListener('submit', function(event){
    event.preventDefault();
    addACourse(theForm);
    return;
}, false);

相反（这是未测试的），尝试将对表单的引用传递给addACourse函数。您可能需要稍微调整它以获取表单数据

theForm.addEventListener('submit', function(event){
    event.preventDefault();
    addACourse(theForm);
    return;
}, false);

---

杰森，如果你的答案是解决方案，为什么这句话会：

formData.append('vin', 'value');

---

位于他的AddAClass（）函数中，而不是出现在发送到服务器的请求正文中？

在浪费了大量时间试图按时完成后，我最终发现，在设置requestHeader的属性时，应该使用“contentType”，而不是“content Type”。 我变了

xhttp.setRequestHeader('content-Type', 'multipart/form-data');

到

这完全解决了问题，有效负载正确加载了formData对象，laravel能够访问输入字段。

---

非常感谢大家尝试帮助我，stackoverflow是一个很棒的社区。

请我需要有人帮助解决这个问题。您的控制器中有您的

dd（$request->all（））

。输出是一个包含所有输入字段的文本加上一个乱七八糟的数据你能分享屏幕快照打开调试栏，点击发送的网络选择请求，点击预览，然后发送屏幕快照吗？该应用程序不允许我对其他答案（仅我自己的答案）发表评论@json最终解决这个问题的方法是将requestHeader的contentType重置为false，然后通过stringify将其发送到服务器

formData.append('vin', 'value');

xhttp.setRequestHeader('content-Type', 'multipart/form-data');

xhttp.setRequestHeader('contentType', 'multipart/form-data');