Как получить доступ к входным данным формы с сервера Laravel

Question

введите описание изображения здесь ниже приведена форма

                  <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> 

Ниже приведен код javascript

           function addACourse(param){
                 //event.preventDefault();
                 console.log(param);
                 const theToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                 //const theForm = document.getElementsByClassName('landLords1')[0];
                 var formData = new FormData(param);
                     formData.append('vin', 'value');
                 var xhttp = new XMLHttpRequest();
                       xhttp.open('POST', '/addACourse', true);
                       xhttp.onreadystatechange = function() {
                            if (this.readyState == 4 && this.status == 200) {
                                console.log(this.responseText);
                                return;
                                const data = JSON.parse(this.responseText);
                                      console.log(data);
                                      // use data here!
                            }
                       }

                       xhttp.setRequestHeader('X-CSRF-TOKEN', theToken);
                       xhttp.setRequestHeader("X-Requested-With", 'XMLHttpRequest');
                       xhttp.setRequestHeader("processData", 'false');
                       xhttp.setRequestHeader('cache', 'false');
                       //xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                       xhttp.send(JSON.stringify(formData));

         }

         const theForm = document.getElementsByClassName('landLords1')[0];
         theForm.addEventListener('submit', function(event){
                event.preventDefault();
                addACourse(this);
                return;
         }, false);

Это мой контроллер laravel

<?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отправить форму.Я хочу отправить форму с помощью xmlHttpRequest ().Я получаю нулевое значение на сервере каждый раз, когда пытаюсь отправить форму, пытался использовать оба

$theData = $request->input('coursetitile');
$data = $request->coursetitle;
return response()->json(array('data' => $data, 'theData'  => $theData),200);
//note coursetitle is one of the imput field.

Я получаю нулевое значение, пожалуйста, как мне решить эту проблему.пожалуйста, я не хочу никакого ответа, который использует JQuery для решения этой проблемы.Я хочу получить ответ только в ванильном javascript.

Answer 1

Джейсон, если ваш ответ был решением, почему эта строка:

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

Расположенная в его функции AddAClass () не отображается в теле запроса, отправляемом на сервер?

Answer 2

Потратив много времени, пытаясь сделать это вовремя, я в конце концов обнаружил, что при настройке атрибутов requestHeader следует использовать «contentType», а не «content-Type», т.е.Я изменил

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

на

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

. Это полностью решило проблему, полезная нагрузка была правильно загружена с объектом formData, и laravel смог получить доступ к полям ввода.Большое спасибо, ребята, за попытки помочь мне, stackoverflow - отличное сообщество.

Answer 3

Насколько я могу судить по вашим скриншотам и коду, вы фактически не отправляете никаких данных на сервер.

Ваш первый скриншот говорит о полезной нагрузке запроса в самом низу.Он слегка обрезан, но похоже, что вы отправляете пустую форму.Это означает, что ваш javascript не находит никаких данных формы для отправки.

Возвращаясь к этому, вы вызываете addACourse из вашего Eventlistener с анонимной функцией (замыкание).

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

Когда вы ссылаетесь на this в закрытии, вы имеете в виду само закрытие, а не вызывающую сторону.Естественно, замыкание не имеет формы, поэтому у вас нет данных формы.

Вместо этого (это не проверено), попробуйте передать ссылку на форму вашей функции addACourse .Возможно, вам придется немного изменить его, чтобы получить данные формы.

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