发布没有 <form> 标签的表单有什么缺点吗

Question

我正在尝试 $post 数据到 contact_form.php 而不是页面刷新或移动，除了我有一个 JS 函数告诉它的做。

有人会问我为什么要这样做。原因是我希望我的表单 post 没有页面休息或打开 contact_form.php.

所以我想尝试不使用 <form> 标签。只需使用 div

构建

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

return=""
target="_blank"
Ajax
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');
        }               
    });
});

不使用表单的实际缺点：

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

Answer 2

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

你必须使用 preventDefault()

发布没有 <form> 标签的表单有什么缺点吗

Are there any disadvantages to posting a form without the <form> tag

javascript

forms

ajax

jquery

form-submit