时间戳

首页 > 解决方案 > laravel api ajax表单不会提交

php - laravel api ajax表单不会提交

问题描述

这是我的第一个 api 项目。你能帮我看看我的代码吗？

我看不出问题。

这是我的控制器。

public function store(Request $request)
{
    //
   $valid=Validator::make($request->all(),[
      'text'=>'required',
      'body'=>'required'
   ]);

   if($valid->fails()){
       return response()->json(['message'=>$valid->messages()]);
   }else{

    $item= Item::create([
        'text'=>$request->input('text'),
        'body'=>$request->input('body')
    ]);
    return response()->json($item);
   }
}

这是我的表格。表格有什么问题吗？

<form id="form">
        <div class="form-group">
            <label>Text :</label>
            <input type="text" id="text" class="form-control col-sm-4">
        </div>

        <div class="form-group">
            <label>Body :</label>
            <textarea id="body" class="form-control col-sm-4"></textarea>
        </div>

        <div class="form-action">
            <input type="submit" class="btn btn-primary" value="submit">
        </div>
    </form>

并且显示函数之间的ajax代码正在工作，但我不知道问题出在哪里？

$('#form').on('submit', function (e) {
        e.preventDefault();//prevent the form to submit to file
        let text = $('#text').val();
        let body = $('#body').val();
        addItems(text, body);
    });


    function addItems(text, body) {
        var item = {
            text: text,
            body: body
        };
        $.ajax({
            method: 'POST',
            url: 'http://localhost:8000/api/items',
            data: item,
            success: function (item) {
                alert('done the item number' + item.id + ' has been added!!');
                location.reload();
            },
            error: function () {
                alert('error')
            }
        })
    }

感谢您的帮助！

标签： phpajaxlaravelformsapi

解决方案

如果您的前端源与后端源分离，则将跨域资源共享 包添加到您的 laravel 项目中。

如果它在您的 laravel 视图中，则将 csrf 令牌添加到元标记 - <meta name="csrf-token" content="{{ csrf_token() }}">

并与您的 ajax 请求一起发送{ _token : document.querySelector('meta[name="csrf-token"]').content}

推荐阅读