laravel api ajax表单不会提交

Posted 2023-03-15

【中文标题】laravel api ajax表单不会提交

【英文标题】：laravel api ajax form wont submit

【发布时间】：2019-02-06 03:02:24

【问题描述】：

这是我的第一个 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>

和show函数之间的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')
            
        )
    

感谢您的帮助！

【参考方案1】：

如果您的前端源与后端源分离，则添加cross-Origin Resource Sharing 打包到你的 laravel 项目中。

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

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

【讨论】：

我已经添加了包..我不知道是什么问题

检查两者。 1.在ajax错误功能检查console.log(error)调试错误2.或检查chrome browser的网络选项卡。

【参考方案2】：

问题是您发送表单时没有发送跨站点请求伪造令牌。 将指令 @csrf 添加到您的视图中 然后发送它有哈桑写的;）

【讨论】：

但我的视图位于不同的位置及其html文件..如何添加csrf？对不起，我还在学习你能告诉我怎么做吗？