在 Laravel 中使用 vue.js 时在 $.ajax 中获得成功或完成响应的问题

Posted 2023-02-22

【中文标题】在 Laravel 中使用 vue.js 时在 $.ajax 中获得成功或完成响应的问题

【英文标题】：Problems getting success or done response in $.ajax when using vue.js in Laravel

【发布时间】：2017-02-18 01:31:05

【问题描述】：

我有一个简单的表单，用户应该只在文本区域内输入文本。当用户在 javascript 中单击提交按钮时，我使用 vue 和 ajax 进行调用以将该文本插入数据库。

我的问题是，在用户单击提交后，我希望清除文本区域，但是在将文本保存到数据库后，文本仍然存在。它持续存在。由于我使用的是 vue.js 和 ajax，因此我正在等待这个 .done（成功）回调函数，以便继续清除表单。

如果文本被保存到数据库中，或者有没有其他想法来清除文本区域？

这是我的刀片代码形式：

<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 代码：

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://***.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 消息，上面写着：

请求失败：解析器错误

控制器的响应如下：

<?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":"[e-mail]","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）

【参考方案1】：

您的问题与 AJAX 上的 dataType 选项有关。您当前有dataType: 'json',，这意味着当服务器返回 JSON 时请求成功。

如果您返回类似return 'ok'; 的内容，AJAX 将失败。

确保您返回的内容类似于：

return Response::json(['ok' => 'true']);

【讨论】：

哦，不。我错过了显示控制器的代码。我已经用它更新了我的问题。但在这种情况下，我不仅要返回ok，还要返回刚刚插入的当前帖子。我试过return response()->json(['ok' => 'true',$post->with('user')->find($createdPost->id)]); 现在回复是<?php"ok":"true","0":"id":31,"user_id":1,"body":"Hello, ","created_at":"2016-10-09 23:25:18","updated_at":"2016-10-09 23:25:18", ... 但我仍然得到同样的错误。那我该怎么做呢？

@Pathros 您的代码似乎没问题。 php 的问题来自其他地方。检查似乎描述相同问题的this post。

非常感谢！该链接对我帮助很大。我的问题出在RouteServiceProvider.php 文件中，我在其中调用了一个只有<?php 的空文件。我打算稍后在那里编写代码，唯一的内容是<?php 标签。所以我现在评论了那部分。