使用无按钮的 AJAX 提交表单答案

【问题标题】：Submitting form with AJAX without button使用无按钮的 AJAX 提交表单
【发布时间】：2016-02-15 17:46:50
【问题描述】：

我正在尝试使用 AJAX 发送一个没有提交按钮的表单。使用提交按钮一切正常，但如果我尝试通过单击其他内容来提交表单，它将无法正常工作。

我搜索了很长一段时间的答案，但到目前为止没有找到任何有用的东西。

function ajaxSubmit(){
  var showHideForm = jQuery('#dashboard-hki-subjects-form').serialize();

 $.ajax({
  type:"POST",
  url: "/wp-admin/admin-ajax.php",
  data: showHideForm,
  success:function(data){
  $('#formMessage').html(data);
  }
  });

  return false;
  }

  $('.show-hide-subject-button').click(function(){ 
    var subject = $(this).attr('subject');
    $('#hide-subject').attr('value',subject);
  });


 $('#dashboard-hki-subjects-form').submit(ajaxSubmit);

我使用的是 Wordpress，所以 AJAX 是通过 admin-ajax.php 处理的。

【问题讨论】：

如果您不使用提交按钮，那么您使用的是什么？为什么你期望它触发一个提交事件？
是的，为什么你需要一个提交按钮，它会刷新整个页面而不是 ajax 调用......
您需要在您使用的任何处理程序中触发表单上的提交。有一个按钮更简单，然后用户不会被阻止通过键盘提交
感谢您的快速回复！我尝试使用 clicked 元素的属性发送表单。我不希望它触发提交事件，但这就是我让它与提交按钮一起工作的方式。我想问题应该是，如何使用 AJAX 发送表单，带或不带提交事件且不带提交按钮。
也许我根本不应该使用表单而只使用 AJAX 发送数据？

标签： php jquery ajax forms submit

【解决方案1】：

如果您只使用输入键处理程序会怎样...

试试这个：

<input type="text" name="txt"/>

$('#txt').keydown(function (e){
    if(e.keyCode == 13){
        console.log('you pressed enter!'); //prints to the browser console...
        ajaxSubmit(); //the function you described in your question...
    }
})

【讨论】：

【解决方案2】：

您必须将ajaxSubmit() 绑定到您单击的任何内容，否则您的页面上将没有任何内容可以触发它。例如，如果您希望在单击 .show-hide-subject-button 元素时提交表单，则必须显式调用 ajaxSubmit()：

$('.show-hide-subject-button').click(function(){ 
    var subject = $(this).attr('subject');
    $('#hide-subject').attr('value',subject);
    ajaxSubmit();
});

【讨论】：