Laravel 8 - 使用 Ajax 插入后答案

【问题标题】：Laravel8 - after insert using AjaxLaravel 8 - 使用 Ajax 插入后
【发布时间】：2021-03-24 04:20:56
【问题描述】：

大家好，我正在使用 laravel8 并使用 Ajax 在数据库中插入记录。
我的问题是，在我插入记录后，它会自动转到新页面，但它只包含一个作为 json 对象的响应（下面的页面截图）

如何防止这种情况并以正常方式重定向。

我的控制器代码：

public function store(Request $request){
        $user = User::create($request->all());
        return response()->json(['url'=>url('/users')]);
}

我的看法：

 $.ajax({
            type: "POST",
            url: "{{route('users.store')}}",
            data:{
             name:        $("#name").val(),
             email :      $("#email").val(),
             image :  $("#image").val(),
            },
             success: function(response){

                 if(response){
                $("#userTable tbody").prepend(
                    '<tr><td>'+ response.id+'</td><td>'
                     + response.name+'</td><td>',
                     + response.email+'</td><td>',
                     + response.image+'</td><td>'
            )
              window.location.href=response.url;

                     $("#userForm")[0].reset();
                $("#userModel").model('hide');

            }

这是页面

对不起我的英语不好

【问题讨论】：

/users 的路由和控制器/方法是什么样的？你正在重定向那里
这里是路由：Route::get('/users', [App\Http\Controllers\UserController::class, 'index'])->name('users.index');这是方法： public function index(){ $users = User::orderBy('id', 'DESC')->get();返回视图('users.index',compact('users')); }
因此，如果您尝试向服务器发送发布请求以创建新用户，然后在创建用户后尝试显示索引页面，为什么需要执行 ajax 请求.您可以向服务器发出简单的 post 请求以创建新用户，然后重定向到索引页面
我不明白你会，所以我需要在 store 之后做什么，它总是在使用 Ajax 插入后给我一个带有 json 数组的新页面
很可能response.url包含存储在url键中的json，尝试这样response.url.url，这样你就得到了字符串，window.location.href=response.url.url;

标签： ajax laravel forms

【解决方案1】：

问题出在return response()->json(['url'=>url('/users')]);

您可以按示例返回 return response()->json(data);

这是一个例子：

控制器：

public function store(Request $request){
        $user = User::create($request->all());
        $data = collect();
        
        //TODO: find a way to catch user data you created
 
        $data->push([
           'email' => (your attribute),
           'name' => (your attribute),
           'image' => (your attribute),
           'id' => (your attribute),
           'url' => (your url),
        ]);

        return response()->json($data);

}

阿贾克斯：

 $.ajax({
            type: "POST",
            url: "{{route('users.store')}}",
            data:{
             name:        $("#name").val(),
             email :      $("#email").val(),
             image :  $("#image").val(),
            },
             success: function(data){

                 if(data){
                $("#userTable tbody").prepend(
                    '<tr><td>'+ data.id+'</td><td>'
                     + data.name+'</td><td>',
                     + data.email+'</td><td>',
                     + data.image+'</td><td>'
            )
              window.location.href=data.url;

                     $("#userForm")[0].reset();
                $("#userModel").model('hide');

            }

【讨论】：

仍然有同样的问题，页面得到这个数据：[ { email: "ttt", name: "tt", image: { }, id: null, url: "127.0.0.1:8000/users" } ]
你到底想做什么，我几乎不明白你想要得到的结果，告诉我你的路线和你在控制器中使用的所有功能
好的，我尝试做类似这个视频的事情：youtube.com/watch?v=OOySLaUFFJE 我对这个视频做同样的事情，但是在提交表单后，我有带有 json 数据的页面，这里是控制器：public function index(){ $users = 用户::orderBy('id', 'DESC')->get();返回视图('users.index',compact('users')); } 公共函数存储（请求 $request）{ $user = User::create($request->all());返回响应()->json(['url'=>url('/users')]); }
这里是视图 $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
$("userForm").submit(function(e){ e.preventDefault(); $.ajax({ type: "POST", url: "{{route('users.store ')}}"，数据：{ 名称：$("#name").val()，电子邮件：$("#email").val()，图像：$("#image").val() , }, 成功: function(response){ console.log(response); window.location.href=response.url; if(response){ $("#userTable tbody").prepend( ' '+ response.id+' ' + response.name+' ',