有什么缺点，以张贴形式不<form>标签

Question

我想$post数据contact_form.php无页面刷新或以任何其它运动比我有一个JS函数告诉它做的事。

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

所以我想这个没有<form>标签。只需用div制作

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

1. 回报= “”
2. 目标= “_空白”
3. 阿贾克斯
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; 
    }); 
}); 

阿贾克斯人所以刷新页面

$('#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()不会因为你需要工作分别获取所有输入字段的值。

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()