Question

在此处输入图片描述是下面的表格

$querySum = "SELECT ($Query1)+($Query2) VAL"

下面是JavaScript代码

$querySum

这是我的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>

我的意图是不使用Jquery提交表单。我想使用xmlHttpRequest（）提交表单。每次尝试提交表单时，我一直在服务器上获取null，尝试同时使用

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

我一直都为null，请如何解决这个问题。请不要使用JQuery来解决此问题的任何答案。我只想在Vanila JavaScript中回答。

Answer 1

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

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

回顾此过程，您正在使用匿名函数（闭包）从事件侦听器中调用 addACourse 。

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

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

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

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

Answer 2

Jason，如果您的答案是解决方案，为什么会这样：

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

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

Answer 3

在浪费大量时间努力按时完成此操作之后，我最终发现在设置requestHeader的属性时，应使用“ contentType”而不是“ content-Type”。我改变了

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

到

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

这完全解决了问题，有效载荷已正确加载了formData对象，而laravel能够访问输入字段。感谢许多人尝试帮助我，stackoverflow是一个很棒的社区。

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

3 个答案: