Question

我正在尝试将$post数据发送到 contact_form.php 而不会让页面刷新或移动，除了我的JS函数告诉它要做的事情。

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

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

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

返回= “”
目标= “_空白”
的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>标签的表单是否有任何缺点

2 个答案: