如何使用 laravel 通过 jquery ajax 将表单值插入数据库？

Posted 2023-05-08

【中文标题】如何使用 laravel 通过 jquery ajax 将表单值插入数据库？

【英文标题】：How to insert form values into database via jquery ajax using laravel?

【发布时间】：2019-09-25 00:08:00

【问题描述】：

控制器：UserController.php

<?php
    namespace App\Http\Controllers;
    use Illuminate\Http\Request;
    use DB;
    use App\Http\Requests;
    use App\Http\Controllers\Controller;

    class UserController extends Controller 
        public function insertform() 
            return view('contact-us');
        
        public function enq()
        
            $name = $this->input->post('name');
            $phone = $this->input->post('phone');
            $email = $this->input->post('email');
            $msg = $this->input->post('msg');
            $data=array('name'=>$name,"phone"=>$phone,"email"=>$email,"msg"=>$msg);
            DB::table('enquiry')->insert($data);
            echo "Record inserted successfully";
        
    

查看：Contact-us.blade.php

<script>
    $(document).ready(function()
        $("#submit").click(function(e)
            e.preventDefault();
            name = $("#name").val(); 
            phone = $("#phone").val();
            email = $("#email").val();
            msg = $("#msg").val();
            $.ajax(
                type:"POST",
                data:"name":name,"phone":phone,"email":email,"msg":msg,
                url:"/enq",
                success:function(data)
                    $("#success").html(data);
                
            );
        );
    );
</script>
<div id="success"></div>
<form method="post">
    <input type="text" placeholder="Your Name" name="name" id="name">
    <input type="text" placeholder="Phone Number" name="phone" id="phone">
    <input type="text" placeholder="Email Adress" name="email" id="email">
    <textarea placeholder="Massege" name="msg" id="msg"></textarea>
    <input type="submit" name="submit" id="submit" value="submit now" class="btn-blue">
</form>

web.php

<?php
Route::get('contact-us', function () 
    return view('contact-us');
);
Route::post('enq','UserController@enq');

我是 laravel 的新手我在做什么我要在数据库中插入一个简单的表单值。现在，当我单击提交按钮时会发生什么，它什么也没显示。我对此一无所知。那么，我该怎么做呢？请帮帮我。

谢谢

【问题讨论】：

在键盘上按F12，如果使用chrome，将打开检查工具。转到Network 选项卡。单击XHR 子选项卡。您将看到您的 enq url 调用并现在进行调试。如果仍然没有看到任何东西，那么在.env 文件APP_DEBUG 中将其设置为true。不要忘记触发终端命令 php artisan config:cache 以反映整个项目的配置更改。

我已经按照您的说明进行了检查，但无法插入表单值我的代码 @RahulMeshram 会发生什么

你卡在哪里了？你的ajax调用工作正常吗？如果是，你是否在enqmethod() 中获取数据？

【参考方案1】：

改变你的 enq 函数

public function enq(Request $request)
       
           $name  = $request->name;
           $phone = $request->phone;
           $email = $request->email;
           $msg   = $request->msg;
           $data=array('name'=>$name,"phone"=>$phone,"email"=>$email,"msg"=>$msg);
           DB::table('enquiry')->insert($data);
           echo "Record inserted successfully";
       

并且还要配置CSRF token

添加 <meta name="_token" content="!! csrf_token() !!"/> 在你的头部

然后

 $.ajaxSetup(
        headers:
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
    );

在您的 ajax 调用之前添加此代码

【参考方案2】：

在 ajax 请求中添加额外的数据，令牌。

    $.ajax(
        type:"POST",
        data:"name":name,"phone":phone,"email":email,"msg":msg,"_token":"csrf_token()",
        url:"URL::to('enq')",
        success:function(data)
            $("#success").html(data);
        
    );

要检查错误，您可以按键盘上的 F12 并查看控制台。 错误以红色显示，如果错误代码为500，则与php有关

【讨论】：

加载资源失败：服务器响应状态为 404（未找到）即/enq

将 url:"/enq" 更改为 url:"URL::to('enq')"