使用AJAX请求时是否仍需要Form元素？

Question

这可能是一个愚蠢的问题，但是我知道我们是否真的仍然需要将我们的输入元素包装在<form>中，即使我们使用jQuery Ajax来传递和检索来自服务器或数据库的数据，这对我来说真的很重要吗？

我的意思是，虽然Ajax方法有类似，类型，数据，甚至数据类型的选项，如下所示

$.ajax({
        type: "POST",
        url:"process.php",
        data: data,
        dataType: "JSON"
});

我们还需要表格吗？从安全方面来看，我认为我们可以在没有表单元素的情况下验证用户输入，但我不确定它是否正确？！如果您认为我们仍然需要表格，那么我们应该如何处理像action和method这样的表格属性？我们应该留空吗？谢谢

Answer 1

不，使用ajax时无需在表单标记中包含输入（或其他）元素。

但是，有时使用表单构造是一个好主意，例如，如果您想使用.serialize()一次性获取所有表单名称/值（例如，如果您使用的是ajax - 这是一个很好的快捷方式）。

请注意，如果您使用表单（即提交按钮<input type="submit"），那么您还应该知道如果您需要阻止表单提交和刷新页面，您可以在事件代码中使用return false;或e.preventDefault();。例如：

$('#myForm').submit(function(event){
    let validation_okay = true;
    //do your validation
    if (!validation_okay){
        alert('Please fix errors and re-submit');
        return false;
        //Here, form will NOT submit but will return control to user
    }
    //if form gets to here, it will submit normally
});

每个人都有自己的风格，但是现在我很少（如果有的话）使用表单标签，而是使用jQuery / js来自己控制UX。使用AJAX，实际上不需要使用表单 - 您可以在不离开当前页面的情况下执行完全相同的操作（除非您专门对其进行编码）。

但是如果您已经开始使用表单，请注意您可以动态创建表单标记，将其添加到DOM，并使用jQuery / js提交它：

//You have a structure that is constructed WITHOUT any form tags - a lightbox or something
//The *submit* button is just an ordinary button (without `type="submit"`)
//User clicks your "Go" or "Submit" button, and you validate the field values. Now you
//want to submit it.
if (!validation_okay){
    let uid = $('#userid').val();
    let pwd = $('#pword').val();
    let myform = '\
        <form id="laform" action="process_login.php" action="post">\
            <input name="user_id" value="' + uid + '" />\
            <input name="passwrd" value="' + pwd + '" />\
        </form>';
    $('body').append(myform);
    $('#laform').submit();
}

或者您可以使用ajax执行与上面相同的操作，如下所示：

let uid = $('#userid').val();
let pwd = $('#pword').val();
if (uid.length && pwd.length){
    $.ajax({
        type: 'post',
         url: '../ajax/login.php',
        data: 'lname=' + uid + '&pword=' + pwd
    }).done(function(d){
        console.log('Received back from PHP side: ' + d);
    });
}

在PHP方面，您将在此处获得一个文档：

/public_html/ajax/login.php  
(Note: above code also expects your js file to also be in a subfolder, 
 for e.g. /public_html/js/script.js)

PHP方面看起来像这样：

<?php
    $login_name = $_POST['lname'];
    $password = $_POST['pword'];
    if ($login_name == 'bob' && $password == 'baluga'){
        echo 'Login successful';
    }else{
        echo 'Wrong, wrong, wrong! Just wrong!'
    }

参考：

Why use a form tag when you're submitting via ajax?

Answer 2

使用Ajax时，表单有多种用途。它提供：

• 当JavaScript因任何原因失败时，用户将数据提交给服务器的方法
• 一个方便的DOM接口到它内部的控件（formElement.elements.field_id_or_name）
• （例如）屏幕阅读器软件使用的语义分组
• 处理按下回车键以触发所有字段中的提交事件

除非您需要一个健壮，可访问，可用的页面而不需要更多的努力，否则您并不严格需要它。