javascript - 使用 AJAX 请求时还需要 Form 元素吗？

Question

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

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

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

我们还需要表格吗？从安全方面来看，我认为我们可以在没有表单元素的情况下验证用户输入，但我不确定它是否正确？!如果您认为我们仍然需要 Form 那么我们应该如何处理像 action 这样的 Form 属性和 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 自己控制用户体验。使用 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?