使用 AJAX 请求时是不是还需要 Form 元素？

Posted 2023-03-05

【中文标题】使用 AJAX 请求时是不是还需要 Form 元素？

【英文标题】：Do I still need a Form element when using a AJAX request?使用 AJAX 请求时是否还需要 Form 元素？

【发布时间】：2014-10-30 20:27:09

【问题描述】：

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

我的意思是，虽然 Ajax 方法有 type 、 url、 data 甚至 dataType 之类的选项，如下所示

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

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

【问题讨论】：

是否需要支持不支持 javascript 的客户端。如果没有，做你喜欢的事。

Why use a form tag when you're submitting via ajax?的可能重复

我不明白你为什么不会使用表单。

【参考方案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 自己来控制用户体验。使用 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?

【参考方案2】：

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

当 JavaScript 因任何原因失败时用户向服务器提交数据的一种方式 内部控件的便捷 DOM 接口 (formElement.elements.field_id_or_name) （例如）屏幕阅读器软件使用的语义分组 处理按下回车键以触发跨所有字段的提交事件

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

【讨论】：

更不用说将表单标记为form的语义价值了。