如何在ajax中提交表单数据和凭据？

在前端开发中，经常需要用到Ajax技术进行异步请求，如何在Ajax中提交表单数据和凭据呢？本文将为大家介绍如何实现。

提交表单数据

在Ajax中提交表单数据，可以使用jQuery中的$.ajax()方法或$.post()方法。这两个方法都可以向服务器发送异步请求，并将表单数据传给服务器。

以$.ajax()方法为例，代码如下：

$.ajax({
    type: "POST",
    url: "submit_form.php",
    data: $("#myForm").serialize(),
    success: function(data) {
        // 请求成功后执行的操作
    },
    error: function() {
        // 请求失败后执行的操作
    }
});

其中，type指定请求类型为POST，url指定请求的URL，data指定要传给服务器的数据，这里使用了jQuery的serialize()方法序列化表单数据。success和error分别指定请求成功和失败后执行的回调函数。

提交凭据

提交凭据指的是向服务器发送需要认证的请求，如登陆请求。在Ajax中提交凭据可以使用XMLHttpRequest对象，并设置其withCredentials属性为true。

代码如下：

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('POST', 'login.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
    if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        // 请求成功后执行的操作
    } else if(xhr.readyState === XMLHttpRequest.DONE && xhr.status !== 200) {
        // 请求失败后执行的操作
    }
}
xhr.send('username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password));

其中，withCredentials属性设为true表示携带凭据发送请求，setRequestHeader方法设置请求头信息，encodeURIComponent方法对用户名和密码进行编码，send方法发送请求。

到此，我们就介绍了如何在Ajax中提交表单数据和凭据，希望对大家开发实践有所帮助。