Json响应在刀片文件上的Laravel中返回未定义的值答案

【问题标题】：Json response return undefined value in Laravel on blade fileJson响应在刀片文件上的Laravel中返回未定义的值
【发布时间】：2021-11-02 08:47:07
【问题描述】：

我在 JSON 响应中返回数据时遇到问题。数据已成功提交到表中，但它在刀片文件上打印未定义的值，当我重新加载时，这个未定义的消失了我在 JSON 响应中返回数据时遇到问题。数据已成功提交到表中，但它在刀片文件上打印未定义的值，当我重新加载时，这个未定义的消失了

`web.php`

Route::get('/ajax', [AjaxCrudController::class, 'index']);
Route::post('/add', [AjaxCrudController::class, 'add'])
    ->name('add');

控制器

namespace App\Http\Controllers\ajax;

use App\Http\Controllers\Controller;
use App\Models\crud_ajax;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class AjaxCrudController extends Controller
{
    public function index()
    {
        $users = DB::table('crud_ajax')->get();

        return view('crud_ajax.index', ['list' => $users]);
    }

    public function add(Request $request)
    {
        $query = DB::table('crud_ajax')
            ->insert([
                'fname' => $request->fname,
                'lname' => $request->lname,
                'email' => $request->email
            ]);

        return response()->json($query);
    }
}

刀片文件

            <form action="" method="" id="add">

                <div id="success" style="color: green;font-weight: bolder;"></div>
                <div id="error"></div>
                <div class="form-group">
                    <label for="fname">FirstName:</label>
                    <input type="text" id="fname" placeholder="Enter Your First Name" value="{{ old('fname') }}" class="form-control">
                </div>
                <div class="form-group">
                    <label for="lname">LastName:</label>
                    <input type="text" id="lname" placeholder="Enter Your Last Name" value="{{ old('lname') }}" class="form-control">
                </div>
                <div class="form-group">
                    <label for="email">Email:</label>
                    <input type="email" id="email" placeholder="Enter Your Email" value="{{ old('email') }}" class="form-control">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-block">Save</button>
                </div>
            </form>
        </div>
        <div class="col-md-8 shadow-lg">
            <table class="table table-hover table-responsive">
                <thead>
                    <th>ID</th>
                    <th>Fname</th>
                    <th>Lname</th>
                    <th>Email</th>
                    <th>Edit | Delete</th>
                </thead>
                <tbody id="tbody">
                    @foreach($list as $value)
                        <tr>
                            <td>{{ $value->id }}</td>
                            <td>{{ $value->fname }}</td>
                            <td>{{ $value->lname }}</td>
                            <td>{{ $value->email }}</td>
                            <td>
                                <a href="" class="btn btn-primary">Edit</a>
                                <a href="" class="btn btn-danger">Del</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$("#add").submit(function(e) {
    e.preventDefault();

    let fname = $("#fname").val();
    let lname = $("#lname").val();
    let email = $("#email").val();

    $.ajax({
        url: "{{ route('add') }}",
        type: "POST",
        data: {
            fname:fname,
            lname:lname,
            email:email,
            _token: '{{ csrf_token() }}'
        },
        success:function(response) {
            if(response) {
                $("#tbody").append("<tr><td>" + response.fname + "</tr></td>");
                $("#add").trigger("reset");
                $("#success").html("Data is inserted successfully").slideDown();
                $("#error").slideUp();
            }
        }
    });
});
</script>

【问题讨论】：

标签： php json ajax laravel

【解决方案1】：

使用create方法，你会直接得到你刚刚插入的元素的JSON数组。

use App\Models\crud_ajax;

    function add(Request $request) {
           return crud_ajax::create([
             'fname' => $request->fname,
             'lname' => $request->lname,
             'email' => $request->email
    
            ]);
    }

【讨论】：

【解决方案2】：

add 函数中存在一个小问题。以下语句 DB::table('crud_ajax')->insert(...) 在执行时不返回任何内容。这会导致将undefined 发送回您的视图。

我建议您使用Eloquent inserts 在您的数据库中创建记录，以便返回创建的模型。请参阅下面的示例。


// You should replace 'model' with your eloquent model.

public function add(Request $request)
{
    $model = new Model;

    $model->fname = $request->fname;
    $model->lname = $request->lname;
    $model->email = $request->email;

    $model->save();

    return response()->json($model);
}

【讨论】：