如何在laravel中提交带有ajax请求的弹出窗体

Posted 2021-04-15

我的Ajax代码

            Query(document).ready(function(){
            jQuery('#password_form').click(function(){
           $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
              }
          });
           jQuery.ajax({
              url: "{{ url('/changepassword') }}",
              method: 'post',
              data: {
                 password: jQuery('#password').val(),
                 new_password: jQuery('#new_password').val(),
                 password_confirmation: jQuery('#password_confirmation').val()
              },
              success: function(result){
                 console.log(result);
              }});
           });
        }); 

我的控制器：

         public function changepassword(Request $request){
    $user = Auth::guard()->user();
    $request_data = $request->All();
    $validator = $this->admin_credential_rules($request_data);
    if($validator->fails()) {
          $errors = $validator->errors();
        $errors = json_decode($errors);

        return response()->json([
            'success' => false,
            'message' => $errors
        ], 422);            } else {

        $current_password = $user->password;
        if(md5($request_data['password']) == $current_password) {
            $user_id = $user->id;
            $obj_user = User::find($user_id);
            $obj_user->password = md5($request_data['new_password']);
            $obj_user->save();

             return IlluminateSupportFacadesRedirect::to('mujucet')
                ->with("modal_message_success", "Password has been changed successfully");
        } else {
            return IlluminateSupportFacadesRedirect::to('mujucet')
                ->with("modal_message_danger", "wong old password");           
     }
    }
}

我有一个弹出窗口，有三个字段1-密码2- new_password 3- password_confirmation

在ajax我的表单提交之前，但我想提交带有ajax的表单，所以我的页面不应该重新加载，我的成功和错误消息应该显示在我的弹出窗体上，但是当我点击按钮重新加载时，值也没有提交。

我不知道我的ajax请求有什么问题。我们将非常感谢您的帮助！

在此先感谢您的帮助。

答案

 $("#myform").submit(function(e){
    e.preventDefault();
    //put your ajax here
 });

您需要使用上面的代码阻止表单提交。

另一答案

您的弹出提交按钮应该是按钮不提交

<button type="button" class="btn btn-primary" title="" 
id="btn_submit">add</button>

<script>
$('#btn_submit').click(function () {
var type = $('#contain-type').val(); // take your all values you want to send 

/*ajax call*/
$.post(baseUrl + '/admin/confirmation-mail(your route)',{"_token": "{{ 
csrf_token() }}", id: parameter, subject: parameter},
function (data, status) { 
alert(data);
});
)};
</script>

调节器

public function name(Request $request){
dd(request->all()); //add your php code
}