JS提交form表单实例分析

JS提交form表单实例分析：

当用户在网站上填写表单时，通过JS代码来自动提交表单也是一种方便快捷的方式，本文将从以下几个方面阐述JS提交form表单的攻略：

1. 首先需要获取form表单元素，可以通过form元素的Id或者Name来获取：

let formEle = document.getElementById('formId');
// 或者
let formEle = document.forms['formName'];

1. 将表单的数据通过JS代码进行处理，然后通过XMLHttpRequest对象的send()方法向指定的URL提交数据：

let data = new FormData(formEle);
let xhr = new XMLHttpRequest();
xhr.open('POST', 'submitUrl', true);
xhr.send(data);

上述例子中，FormData对象用于处理表单数据，XMLHttpRequest对象用于向服务器发送POST请求，并将表单数据通过send()方法发送到指定的URL。

除此之外，还可以使用jQuery的AJAX来提交表单数据，例如：

$.ajax({
    type: 'POST',
    url: 'submitUrl',
    data: new FormData(formEle),
    contentType: false,
    processData: false,
    success: function(response) {
        console.log(response);
    }
});

上述例子中，使用jQuery的ajax()方法来发送POST请求，data参数设置为FormData对象，contentType和processData参数都设置为false，表示服务器将数据以“multipart/form-data”形式进行处理。

示例1：使用原生JS代码提交表单数据

HTML代码：

<form id="myForm">
    <label for="name">姓名：</label>
    <input type="text" name="name" id="name" />
    <br />
    <label for="email">邮箱：</label>
    <input type="email" name="email" id="email" />
    <br />
    <input type="button" value="提交" onclick="submitForm()" />
</form>

JavaScript代码：

function submitForm() {
    let formEle = document.getElementById('myForm');
    let data = new FormData(formEle);
    let xhr = new XMLHttpRequest();
    xhr.open('POST', 'submitUrl', true);
    xhr.send(data);
}

示例2：使用jQuery提交表单数据

HTML代码：

<form id="myForm">
    <label for="name">姓名：</label>
    <input type="text" name="name" id="name" />
    <br />
    <label for="email">邮箱：</label>
    <input type="email" name="email" id="email" />
    <br />
    <input type="button" value="提交" id="submitButton" />
</form>

JavaScript代码：

$(document).ready(function() {
    $('#submitButton').click(function() {
        let formEle = document.getElementById('myForm');
        $.ajax({
            type: 'POST',
            url: 'submitUrl',
            data: new FormData(formEle),
            contentType: false,
            processData: false,
            success: function(response) {
                console.log(response);
            }
        });
    });
});

总结：

通过上述两个示例，可以看到通过JS代码提交表单数据也是非常方便的。在使用原生JS代码提交表单时，需要获取form表单元素，然后通过FormData对象将表单数据处理为可以发送给服务器的格式，最后通过XMLHttpRequest对象的send()方法向服务器发送POST请求。而使用jQuery提交表单数据更是简单，只需要通过ajax()方法来发送POST请求即可。