AJAX在Laravel 5.1中不起作用(AJAX not working in Laravel 5.1)

我创建了一个带有JS文件的简单HTML文档来测试AJAX调用，我知道XHR请求正在成功提交，但响应中没有任何内容。 在控制台中，我看到template属性在对服务器的post请求中没有任何关联，但我无法弄清楚为什么......

掌握HTML：

<!DOCTYPE> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="{!! asset('/js/main.js') !!}"></script> </head> <body> @yield('content') </body> </html>

页面HTML：

@extends('layouts.master') @section('content') <p>Make a new email to send out:</p> {!! Form::token() !!} <textarea id='template' style="resize:none;width:500px;height:100px;"></textarea> <button id='addContacts'>Add Contacts</button> <span id='loading' style='display:none;'>Loading...</span> <div id='results'></div> @endsection

JS文件（在请求中尝试了type和method ，但我使用的是JQuery 2.1.3，因此两者都可以）：

$(document).ready(function(){ // return the list of input fields for this template $('#addContacts').click(function(){ $.ajax({ method: 'post', url: 'http://newco.dev/addContacts', data: { 'template' : $('#template').val(), '_token' : $('input[name=_token]').val() }, error: function() { alert('Something went wrong.'); }, beforeSend: function() { $('#loading').show(); }, success: function(response) { $('#loading').hide(); $('#results').html(response); } }); }); }); // end doc ready

路线：

Route::post('/addContacts', 'ActionController@returnFields');

控制器（是的， use App\Http\Requests;包括在内）：

public function returnFields(Request $request) { sleep(2); return $request->template; }

提交时，# #loading div按预期显示2秒，但之后没有返回任何内容......

单击按钮后的开发工具（在Chrome中）：

Remote Address:192.168.10.10:80 Request URL:http://newco.dev/addContacts Request Method:POST Status Code:200 OK FORM DATA: template: _token:AuOTiLSg3rKYtLDIH1abzsQHsLv0fzswgXIfzE8h

Laravel日志中没有记录任何内容; 我假设因为它不是500错误。

有任何想法吗？ 我每天都使用Laravel作为API开发人员，所以我对它的概念非常熟悉，但我不是最好的JS开发人员（虽然我肯定有它的经验）所以也许我只是遗漏了一些明显的东西。 如果您需要更多数据，请询问。

谢谢！

I've created a simple HTML doc with a JS file to test an AJAX call and I know the XHR request is being submitted successfully but the response has nothing in it. In the console I see that the template attribute has nothing associated with it in the post request to the server but I can't figure out why...

Master HTML:

<!DOCTYPE> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="{!! asset('/js/main.js') !!}"></script> </head> <body> @yield('content') </body> </html>

Page HTML:

@extends('layouts.master') @section('content') <p>Make a new email to send out:</p> {!! Form::token() !!} <textarea id='template' style="resize:none;width:500px;height:100px;"></textarea> <button id='addContacts'>Add Contacts</button> <span id='loading' style='display:none;'>Loading...</span> <div id='results'></div> @endsection

JS file (tried both type and method in the request but I'm using JQuery 2.1.3 so both will work):

$(document).ready(function(){ // return the list of input fields for this template $('#addContacts').click(function(){ $.ajax({ method: 'post', url: 'http://newco.dev/addContacts', data: { 'template' : $('#template').val(), '_token' : $('input[name=_token]').val() }, error: function() { alert('Something went wrong.'); }, beforeSend: function() { $('#loading').show(); }, success: function(response) { $('#loading').hide(); $('#results').html(response); } }); }); }); // end doc ready

Routes:

Route::post('/addContacts', 'ActionController@returnFields');

Controller (yes, use App\Http\Requests; is included):

public function returnFields(Request $request) { sleep(2); return $request->template; }

When submitted, the #loading div is shown for 2 seconds as expected, but then nothing is returned...

In the dev tools (in Chrome) after the button is clicked:

Remote Address:192.168.10.10:80 Request URL:http://newco.dev/addContacts Request Method:POST Status Code:200 OK FORM DATA: template: _token:AuOTiLSg3rKYtLDIH1abzsQHsLv0fzswgXIfzE8h

Nothing is recorded in the Laravel logs; I'm assuming because it's not a 500 error.

Any ideas? I use Laravel every day as an API developer so I'm very familiar with its concepts but I'm not the best JS developer (although I definitely have experience with it) so maybe I'm just missing something obvious. If you need anymore data, just ask.

Thanks!

最满意答案

你应该show你隐藏的div

即，改变$('#loading').hide(); to $('#loading').show();

然后只有你能看到你得到的输出

success: function(response) { $('#loading').show(); $('#results').html(response); }

希望这对你有所帮助

So, after trying a million things and talking to a ton of people, I changed the name of the attribute in the page to email instead of template and everything works beautifully. I'm not sure why the word "template" would cause an issue but it seems to be the case.

AJAX在Laravel 5.1中不起作用(AJAX not working in Laravel 5.1)

我创建了一个带有JS文件的简单HTML文档来测试AJAX调用，我知道XHR请求正在成功提交，但响应中没有任何内容。 在控制台中，我看到template属性在对服务器的post请求中没有任何关联，但我无法弄清楚为什么......

掌握HTML：

<!DOCTYPE> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="{!! asset('/js/main.js') !!}"></script> </head> <body> @yield('content') </body> </html>

页面HTML：

@extends('layouts.master') @section('content') <p>Make a new email to send out:</p> {!! Form::token() !!} <textarea id='template' style="resize:none;width:500px;height:100px;"></textarea> <button id='addContacts'>Add Contacts</button> <span id='loading' style='display:none;'>Loading...</span> <div id='results'></div> @endsection

JS文件（在请求中尝试了type和method ，但我使用的是JQuery 2.1.3，因此两者都可以）：

$(document).ready(function(){ // return the list of input fields for this template $('#addContacts').click(function(){ $.ajax({ method: 'post', url: 'http://newco.dev/addContacts', data: { 'template' : $('#template').val(), '_token' : $('input[name=_token]').val() }, error: function() { alert('Something went wrong.'); }, beforeSend: function() { $('#loading').show(); }, success: function(response) { $('#loading').hide(); $('#results').html(response); } }); }); }); // end doc ready

路线：

Route::post('/addContacts', 'ActionController@returnFields');

控制器（是的， use App\Http\Requests;包括在内）：

public function returnFields(Request $request) { sleep(2); return $request->template; }

提交时，# #loading div按预期显示2秒，但之后没有返回任何内容......

单击按钮后的开发工具（在Chrome中）：

Remote Address:192.168.10.10:80 Request URL:http://newco.dev/addContacts Request Method:POST Status Code:200 OK FORM DATA: template: _token:AuOTiLSg3rKYtLDIH1abzsQHsLv0fzswgXIfzE8h

Laravel日志中没有记录任何内容; 我假设因为它不是500错误。

有任何想法吗？ 我每天都使用Laravel作为API开发人员，所以我对它的概念非常熟悉，但我不是最好的JS开发人员（虽然我肯定有它的经验）所以也许我只是遗漏了一些明显的东西。 如果您需要更多数据，请询问。

谢谢！

I've created a simple HTML doc with a JS file to test an AJAX call and I know the XHR request is being submitted successfully but the response has nothing in it. In the console I see that the template attribute has nothing associated with it in the post request to the server but I can't figure out why...

Master HTML:

<!DOCTYPE> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="{!! asset('/js/main.js') !!}"></script> </head> <body> @yield('content') </body> </html>

Page HTML:

@extends('layouts.master') @section('content') <p>Make a new email to send out:</p> {!! Form::token() !!} <textarea id='template' style="resize:none;width:500px;height:100px;"></textarea> <button id='addContacts'>Add Contacts</button> <span id='loading' style='display:none;'>Loading...</span> <div id='results'></div> @endsection

JS file (tried both type and method in the request but I'm using JQuery 2.1.3 so both will work):

$(document).ready(function(){ // return the list of input fields for this template $('#addContacts').click(function(){ $.ajax({ method: 'post', url: 'http://newco.dev/addContacts', data: { 'template' : $('#template').val(), '_token' : $('input[name=_token]').val() }, error: function() { alert('Something went wrong.'); }, beforeSend: function() { $('#loading').show(); }, success: function(response) { $('#loading').hide(); $('#results').html(response); } }); }); }); // end doc ready

Routes:

Route::post('/addContacts', 'ActionController@returnFields');

Controller (yes, use App\Http\Requests; is included):

public function returnFields(Request $request) { sleep(2); return $request->template; }

When submitted, the #loading div is shown for 2 seconds as expected, but then nothing is returned...

In the dev tools (in Chrome) after the button is clicked:

Remote Address:192.168.10.10:80 Request URL:http://newco.dev/addContacts Request Method:POST Status Code:200 OK FORM DATA: template: _token:AuOTiLSg3rKYtLDIH1abzsQHsLv0fzswgXIfzE8h

Nothing is recorded in the Laravel logs; I'm assuming because it's not a 500 error.

Any ideas? I use Laravel every day as an API developer so I'm very familiar with its concepts but I'm not the best JS developer (although I definitely have experience with it) so maybe I'm just missing something obvious. If you need anymore data, just ask.

Thanks!

最满意答案

你应该show你隐藏的div

即，改变$('#loading').hide(); to $('#loading').show();

然后只有你能看到你得到的输出

success: function(response) { $('#loading').show(); $('#results').html(response); }

希望这对你有所帮助

So, after trying a million things and talking to a ton of people, I changed the name of the attribute in the page to email instead of template and everything works beautifully. I'm not sure why the word "template" would cause an issue but it seems to be the case.