在 laravel 中使用 AJAX 提交表单

Question

我创建了一个表单来将数据提交到数据库中。当我不使用 AJAX 时，这工作正常。

即使在添加 ajax 之后，它也会将我带到另一个页面并显示文本，即我在控制器中返回的内容。

我的控制器功能

 public function newAppointment(Request $request){
    // Validate the request...
    $this->validate($request, [
        'name' => 'required',
        'email' => 'email|required',
        'mobile' => 'numeric|required',
        'date' => 'date|required',
        'time' => 'required',
    ]);

    $otp = rand(100000, 999999);

    $schedule = new \App\Schedules;

    $schedule->name   = $request->name;
    $schedule->email  = $request->email;
    $schedule->mobile = $request->mobile;
    $schedule->date   = $request->date;
    $schedule->time   = $request->time;

    $schedule->save();

    $id = $schedule->id;

    $verify = array('otp'=>$otp, 'id'=>$id);
    echo json_encode(array('verify'=> $verify));


}

Ajax 脚本

<script type="text/javascript">     
        $(document).ready(function (e){
            $("#newAppointment").on('submit',(function(e){
                e.preventDefault();
                $.ajax({
                    url: "appointment",
                    type: "POST",
                    data:  {name: $("#name").val, email: $("#email").val, mobile: $("#mobile").val, date: $("#date").val, time: $("#time").val },
                    contentType: "application/json",
                    cache: false,
                    processData:false,
                    success: function(data){
                        alert("Success");
                    },
                    error: function(data){
                        alert(data.error->first());
                    }           
                });
            }));
        });
        </script>

当我点击提交按钮时，我会在新页面中获得一些文本作为输出，即我在控制器中返回的内容。

提交表单后如何在同一页面上。

{"verify":{"otp":847042,"id":44}}

Answer 1

因为你的js代码有错误：

error: function(data){
    alert(data.error->first());
}

这将导致此事件永远不会发生。

Answer 2

尝试：

  $("#newAppointment").on('click',(function(evt){
            evt.preventDefault();
            $.ajax({
                url: "/appointment",
                type: "POST",
                data:  {name: $("#name").val(), email: $("#email").val(), mobile: $("#mobile").val(), date: $("#date").val(), time: $("#time").val() },
                processData: false,
                contentType: false,
                success: function(data){
                    console.log(data)
                },
                error: function(msg){
                    console.log(msg)
                }           
            });
        }));

Answer 3

您无需提交表单。只需将 AJAX 请求（POST 类型）发送到您在 ROUTE 中定义的 URL (/appointment) 即可将您带到函数 newAppointment。

尝试在控制器中返回一些东西，以便您可以接收它

success: function(data){
    alert("Success");
},

在数据中，您应该拥有控制器中返回的内容。

Answer 4

试试

$("#newAppointment").submit(function(){
   ...
   ...
});

或

$("#newAppointment").on('submit', function(){
   ...
   ...
});