e.preventDefault() 不起作用。 AJAX / Laravel 5.4答案

【问题标题】：e.preventDefault() does not work. AJAX / Laravel 5.4e.preventDefault() 不起作用。 AJAX / Laravel 5.4
【发布时间】：2017-09-21 10:25:19
【问题描述】：

我有一个 Ajax 调用，它发送用户表单输入以在后端处理。后端的控制器以 JSON 形式发回结果，当提交表单时，页面会重新加载并重定向到带有原始 JSON 的空白页面，而不是由 AJAX 获取的 json。

这是 Ajax 调用：

<script type="text/javascript">
    $(document).ready(function(){
        $('form').on('submit', '#topup-form', function(e){
        e.preventDefault();
            $.ajax({
                url: $('form').attr('action'),
                method: 'post',
                data: $('form').serialize(),

                success: function(result){
                    alert(result);
                },

                error: function(errorData){
                    alert(errorData);
                }
            });
        });
        $.ajaxSetup({
            headers: {
                'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
            }
        })
    });
</script>

这是 Laravel 控制器，如果验证失败则发送 Json，如果用户通过身份验证，则重定向用户，否则返回 401 要求用户登录。

public function topupPost(Request $request) {
    $validator = [
    'topupAmount'=> 'required|integer|between:10,500',
    'phonenumber'=> 'required|regex:/^05[602][0-9]{7}$/',
    ];

    $inputs = $request->all();

    Log::info($inputs);

    $validator = Validator::make($inputs, $validator);

    if($validator->fails()){
        return Response::json([
            'error' => true,
            'message' => $validator->messages(),
            'code' => 400
        ], 400);
    }

    elseif (Auth::check()) {
         return view('pages.checkout', compact('inputs')); 
     }

     return Response::json([
            'error' => true,
            'message' => "Please login first",
            'code' => 401
        ], 401);    
}

发生的情况是没有弹出任何警报，但用户被重定向到带有原始 JSON 的页面。

【问题讨论】：

尝试在末尾添加return false;
您确定您正在收听正确的事件吗？如果我没记错的话，那就是在每个 '
' 元素
中搜索 id 为 'topup-form' 的元素
@Justinas 我添加了 onsubmit="return false" 并且它起作用了。谢谢。
@Gerard 只有具有该 ID 的表单，但我也将调用重写为： $('#topup-form').submit(function(e){... 谢谢.

标签： php jquery json ajax laravel-5.4

【解决方案1】：

我也遇到过类似的问题我通过将提交按钮类型更改为“按钮”来解决它，以便表单不会自动提交。我的ajax代码如下：

$(document).ready(function() {
           $("#submit").click(function() {   
            var loginForm = $("#contactForm");
            var formData = loginForm.serialize();

              /*alert(formData);*/

                 $.ajax({
                     url: /*you URL*/,
                     type:'post',
                     data:formData,
                     success:function(data){
                         //alert(data);     //for redirecting instead of alert try below code

                         if(data == "") {       //True Case i.e. passed validation
                          alert('error')
                         }
                         else {                 //False Case: With error msg
                         alert(data);   //$msg is the id of empty msg
                         }

                     },
                     error: function (data) {
                         /*console.log(data);*/
                         alert(data);
                     }
                 });

           });

         /*alert('Successfully Loaded');*/

         });

你的 php 响应句柄看起来也不错。希望这会有所帮助

【讨论】：