javascript - 发布没有 标签的表单有什么缺点吗

Question

这个问题已经有答案了:

Using JQuery - preventing form from submitting (15 个回答)

已关闭 5 年前。

我正在尝试$post数据到 contact_form.php ，除了我有 JS 函数告诉它要做的事情之外，没有页面刷新或移动。

有人会问我为什么要这样做。原因是我希望在页面不休息或打开 contact_form.php 的情况下发布表单。

所以我想在没有 <form> 的情况下尝试这个标签。只需使用 div 构建即可

我已经尝试了下面的每个解决方案。所有这些都会刷新页面。

1. 返回=“”
2. 目标=“_blank”
3. Ajax
4. JQ 解决方案

JQ仍然刷新页面

$(document).ready(function(){
   var $form = $('form');
   $form.submit(function(){
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            // do something here on success
      },'json');
      return false;
   });
});

Ajax也会刷新页面

$('#submit').click(function() {
    $.ajax({
        url: 'contact_form.php',
        type: 'POST',
        data: {
            email: 'email@example.com',
            message: 'hello world!'
        },
        success: function(msg) {
            alert('Email Sent');
        }               
    });
});

我也不想在此页面上显示所有电子邮件代码。我希望能够引用 contact_form.php。

使用这样的方法有什么缺点吗？比如安全性、功能性，也许是移动版本问题等？

Answer 1

您只需要使用event.preventDefault()来停止表单提交的默认行为。

$('#submit').click(function(e) {
    // This will prevent page refresh
    e.preventDefault();
    $.ajax({
        url: 'contact_form.php',
        type: 'POST',
        data: {
            email: 'email@example.com',
            message: 'hello world!'
        },
        success: function(msg) {
            alert('Email Sent');
        }               
    });
});

不使用表单的实际缺点:

1. 丑陋/糟糕的 DOM
2. 您将无法使用.submit
3. .serialize() 不起作用，因为您需要单独获取所有输入字段的值。