在Laravel中使用vue.js时在$ .ajax中获得成功或完成响应的问题 [英] Problems getting success or done response in $.ajax when using vue.js in Laravel
问题描述
我有这种简单的形式,用户只应在文本区域内键入文本.当用户单击javascript内的提交"按钮时,我使用vue和ajax进行了调用,以将该文本插入数据库.
I have this simple form where the user should only type text inside a textarea. When the user clicks on the submit button, inside the javascript, I make a call with vue and ajax to insert that text into the database.
我的问题是,在用户单击提交"之后,我希望清除文本区域,但是将文本保存到数据库中之后,文本仍然存在.它仍然存在.由于我正在使用vue.js和ajax,因此我正在等待此.done(成功)回调函数,以便继续清除表单.
My problem is that, right after the user clicks on submit, I want the textarea to be cleared, but after the text has been saved into the database, the text is still there. It persists. Since I am using vue.js and ajax, there is this .done (success) callback function I am waiting in order to proceed to clear the form.
或者如果文本已保存到数据库中,还有其他清除文本区域的想法吗?
Or is there any other idea to clear the textarea, if the text was saved into the database?
这是我的刀片代码格式:
Here is my blade code of the form:
<div class="row" id="timeline">
<div class="col-md-4">
<form action="#" v-on:submit="postStatus">{{-- Name of the method in Vue.js --}}
<div class="form-group">
<textarea class="form-control" rows="5" maxlength="140" autofocus placeholder="What are you upto?" required v-model="post" id="textareapost"></textarea>
</div>
<input type="submit" value="Post" class="form-control btn btn-info">
{{ csrf_field() }}
</form>
</div>
<div class="col-md-8">
Timeline
</div>
</div>
这是我的控制者:
<?php
namespace App\Http\Controllers;
use App\Post;
use Illuminate\Http\Request;
use App\Http\Requests;
class PostController extends Controller
{
public function create(Request $request, Post $post)
{
//$request->body;
//Remember, all we really need is the body. Because if create this post through
//the User model, it'll automatically assign us a user_id
//validation:
$this->validate($request,[
'body' => 'required|max:140',
]);
//die('Posted in the controller!: '.$request->body); //$request->get('body');
//creating the post from the user, from the post that belongs to the user:
$createdPost = $request->user()->posts()->create([
'body' => $request->body,
]);
//Now respond with the post that has been created:
return response()->json($post->with('user')->find($createdPost->id));
}
}
到目前为止的javascript代码:
And the javascript code so far:
var csrf_token = $('meta[name="csrf-token"]').attr('content');
/*Event handling within vue*/
//when we actually submit the form, we want to catch the action
new Vue({
el : '#timeline',
data : {
post : '',
token : csrf_token,
},
methods : {
postStatus : function (e) {
e.preventDefault();
console.log('Posted: '+this.post+ '. Token: '+this.token);
var request = $.ajax({
url : '/posts',
method : "POST",
dataType : 'json',
data : {
'body' : this.post,
'_token': this.token,
}
}).done(function (msg) {
console.log('Data saved: '+msg);
this.post = '';/*Attempting to clear the form*/
}.bind(this));/*http://stackoverflow.com/a/26479602/1883256*/
request.done(function( msg ) {
console.log('Data saved: '+msg+'. Outside ...');
//$( "#log" ).html( msg );
});
request.fail(function( jqXHR, textStatus ) {
console.log( "Request failed: " + textStatus );
});
}
},
});
保存文本后,我再也没有获得.done部分的console.log文本,但是却得到了.fail消息,内容为:
After the the text has been saved, I never get the console.log text of the .done part, but I get the .fail message which says:
请求失败:parsererror
Request failed: parsererror
来自控制器的响应正确如下:
And the response from the controller is right the following:
<?php{"id":29,"user_id":1,"body":"Sunday evening post","created_at":"2016-10-09 23:03:11","updated_at":"2016-10-09 23:03:11","user":{"id":1,"firstname":null,"lastname":null,"username":"pathros","email":"pathros@somemail.net","created_at":"2016-10-08 05:33:06","updated_at":"2016-10-08 18:57:19"}}
我注意到响应添加了<?php
.也许是Chrome的检查元素工具?
我想念什么?
(注意:我正在使用jQuery 3.1.1和Laravel 5.3)
I noticed that the response adds <?php
. Is it maybe the Chrome's inspect elements tool?
What am I missing?
(Note: I am using jQuery 3.1.1 and Laravel 5.3)
推荐答案
您的问题与AJAX上的dataType
选项有关.当前,您有dataType: 'json',
,这意味着服务器返回JSON时请求成功.
Your issue has to do with the dataType
option on the AJAX. You currently have dataType: 'json',
which means the request is successful when the server returns a JSON.
如果返回类似return 'ok';
的内容,则AJAX将失败.
If you are returning something like return 'ok';
that AJAX will fail.
确保返回的内容如下:
return Response::json(['ok' => 'true']);
这篇关于在Laravel中使用vue.js时在$ .ajax中获得成功或完成响应的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!