时间戳

首页 > 解决方案 > AJAX 不提交

javascript - AJAX 不提交

问题描述

我有一个 laravel 项目，管理员可以通过表单更改用户数据。我希望这个表单由 ajax 提交。但它没有被提交。

我有一个表格：

<form id="userData{{$loop->iteration}}" method="POST">
@csrf
<!--some inputs-->
</form>

<button id="changeUserData{{$loop->iteration}}" data-id="#userData{{$loop->iteration}}">Save</button>

JS：

$("#changeUserData{{$loop->iteration}}").click(function (e) {
  var ele = $(this);
  var formId = ele.attr("data-id");
  console.log(formId);
  $(formId).submit(function (e){
    console.log("test2");
    e.preventDefault();
    $.ajax({
      url: '{{url('changeUserData')}}',
      method: "PATCH",
      data: $(formId).serialize(),
      success: function(){
        console.log("test");
      }
    })
  })
});

当我按下按钮时，第一个 console.log 被触发，但没有别的。我检查了 formId 是否与表单 ID 匹配，并且确实如此，所以我不知道出了什么问题。

标签： javascriptajaxlaravel

解决方案

问题在于.submit()参数handler不提交表单本身。它只是将事件处理程序绑定到表单的submit事件。

您可以删除该绑定，它应该可以工作：

$("#changeUserData{{$loop->iteration}}").click(function (e) {
    var ele = $(this);
    var formId = ele.attr("data-id");
    console.log(formId);

    $.ajax({
        url: '{{url('changeUserData')}}',
        method: "PATCH",
        data: $(formId).serialize(),
        success: function(){
          console.log("test");
        }
    })
})

推荐阅读