ajax如何提交后再获取返回信息

AJAX是一种强大的技术，可以在不刷新整个页面的情况下与服务器进行通信。通过使用AJAX，我们可以实现动态加载内容，提高用户体验，并且不会打断用户的操作流程。本文将重点介绍如何使用AJAX进行表单提交，并在服务器处理请求后获取返回的信息。

假设我们有一个登录表单，用户输入用户名和密码后提交表单。在传统的方式中，当用户点击登录按钮后，浏览器会刷新整个页面，然后跳转到服务器返回的登录成功页面。这样的体验不够流畅，用户需要等待页面重新加载，操作流程也被打断。而使用AJAX技术，我们可以实现在不刷新页面的情况下进行登录验证。

// HTML部分



登录

// JavaScript部分
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "/login", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
alert("登录成功！");
} else {
alert("登录失败，请检查用户名和密码。");
}
}
}
};
xhr.send("username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
}

在上面的代码中，我们首先通过JavaScript获取到用户名和密码的值。然后创建了一个XMLHttpRequest对象，通过open方法指定请求的方法（POST），URL（/login）和是否异步（true）。接下来，我们设置了请求头，指定了表单数据的编码方式（application/x-www-form-urlencoded）。

在xhr.onreadystatechange函数中，我们检查readyState属性是否等于XMLHttpRequest.DONE，这表示请求已经完成。然后再使用status属性检查服务器返回的HTTP状态码是否为200，这表示请求成功。如果请求成功，我们将服务器返回的响应文本使用JSON.parse方法解析为一个JavaScript对象，并根据success属性判断登录是否成功。最后，根据登录结果，我们可以执行相应的操作，例如弹出一个提示框。

通过以上的代码，我们实现了在不刷新页面的情况下进行登录验证。用户输入用户名和密码后，点击登录按钮，表单数据通过AJAX提交给服务器进行处理。服务器根据接收到的数据进行验证，然后返回一个表示登录结果的JSON字符串。JavaScript代码根据返回的JSON字符串进行处理，并执行相应的操作。这样的交互过程更加流畅，用户体验也更加良好。

AJAX不仅适用于登录验证，还可应用于许多其他场景，例如表单提交、数据加载、动态内容更新等。通过AJAX，我们可以实现与服务器的即时通信，不需要刷新整个页面，提高页面的响应速度和用户体验。

总结来说，AJAX是一种非常有用的技术，可以实现在不刷新整个页面的情况下与服务器进行通信。通过使用AJAX提交表单并获取返回的信息，我们可以提高用户体验，使用户操作流程更加流畅。无论是登录验证还是其他场景，AJAX都能为我们带来很多便利。