AJAX 表单部分有效

Question

我可以提交这样的表单并且它可以工作：

$(document).on('click', '#someLink', function() {
  var frm = $('#myCustomForm');
  frm.submit();
});

但是，当我提交如下相同的表单时，该表单没有被提交：

$(document).on('click', '#someLink', function() {
  var frm = $('#myCustomForm');
  frm.submit(function(e) {
    $.ajax({
      type: 'POST',
      url: '/comments/new/',
      dataType: 'application/json',
      data: frm.serialize(),
      success: function(data) {
        alert('successful');
      },
      error: function(data) {
        alert('something went wrong');
      }
    });
    e.preventDefault();
    return false;
  });
});

我在这里做错了什么？

Answer 1

这两个代码完全相反。 frm.submit(function(e) {}) 为表单提交分配一个函数，因此您需要再次提交表单。

您只想运行 Ajax 代码，因此只需运行代码即可。

$(document).on('click', '#someLink', function(e) {
  var frm = $('#myCustomForm');
  $.ajax({
      ...
  });
  e.preventDefault();
});

Answer 2

当document 准备好时，您可以附加您的事件处理程序。另外，return false; 足以满足您的 submit 处理程序。

$(document).ready(function() {
  var frm = $('#myCustomForm');
  frm.on('submit', function() {
    $.ajax({
      type: 'POST',
      url: '/comments/new/',
      dataType: 'application/json',
      data: frm.serialize(),
      success: function(data) {
        alert('successful');
      },
      error: function(data) {
        alert('something went wrong');
      }
    });
    return false;
  });
});

更新

我认为您应该仔细查看您的网址/comments/new/ 以确保它是正确的。更好的是，只需将表单的 action 属性作为 url 即可。

url: frm.attr('action'),

改变它，看看它是否有效。