使用AJAX请求时是否仍需要Form元素？ [英] Do I still need a Form element when using a AJAX request?

问题描述

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

This might be a silly question but it is really matter to me to know if we really STILL need to wrap our input elements in side a <form> even when we are using jQuery Ajax to Pass and Retrieve data from the Server or Database?

我的意思是Ajax方法有类型，url，数据甚至dataType等选项，如下所示

I mean while Ajax method has options like type , url, data, and even dataType like below

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

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

Do we still need the Form? From the Security aspect I think we can validate the user inputs without having the form element but I am not sure that it correct or not?! If you think we still need the Form so how we should deal with Form attributes like action and method? should we leave them blank? Thanks

推荐答案

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

No, there is no need to wrap input (or other) elements in form tags when using ajax.

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

However, there are times when using a form construct is a good idea, such as if you want to use .serialize() to grab all the form names/values in one go (for example, if you are using ajax - it's a great shortcut).

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

Note that if you use a form (i.e. submit button <input type="submit") then you should also know that you can use return false; or e.preventDefault(); in your event code if you need to prevent the form from submitting and refreshing the page. For example:

$('#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，实际上不需要使用表单 - 您可以在不离开当前页面的情况下执行完全相同的操作（除非您专门对其进行编码以执行此操作）。

Everyone has their own style, but these days I rarely (if ever) use form tags and instead use jQuery/js to control the UX myself. With AJAX, there is really no need to use a form - you can do exactly the same thing without navigating away from the current page (unless you then specifically code it to do so).

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

BUT if you are set on using forms, also note that you can create a form tag on the fly, add it to the DOM, and use jQuery/js to submit it:

//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执行与上面相同的操作，如下所示：

Or you can do the same thing as above using ajax, which would look like this:

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方面，你可以在这里找到一份文件：

On the PHP side, you would have a document here:

/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方可能看起来像这个：

The PHP side might look something like this:

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

参考：

为什么在您使用表格标签时'通过ajax提交？

这篇关于使用AJAX请求时是否仍需要Form元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！