```html
接下来，我们需要使用 JavaScript 编写 Ajax 表单提交代码。首先，我们需要监听表单的提交事件并阻止默认的表单提交行为。然后，我们使用 JavaScript 的内置 XMLHttpRequest 对象创建 Ajax 请求，并通过 POST 方法将表单数据发送到服务器。代码如下：```javascript document.getElementById("loginForm").addEventListener("提交", function(event) { event.preventDefault(); // 默认阻止表单提交行为 var 用户名 = document.getElementById("用户名").value; var 密码 = document.getElementById("密码").value; var xhr = new XMLHttpRequest(); m.smtshopping.cn("POST", "login.php", true); // 指定服务器端处理脚本的URL xhr.onreadystatechange = 函数() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { var 响应 = JSON.parse(xhr.responseText); // 处理服务器返回的数据 } };xhr.send("用户名="+encodeURIComponent(用户名)+"&password="+encodeURIComponent(密码)); });
在代码中，我们首先获取用户名和密码值，并使用 XMLHttpRequest 对象创建 Ajax 请求。然后，我们使用 open 方法指定服务器端处理脚本的 URL。该URL可以是PHP、Java或其他用于接收和处理表单提交的数据的后端程序的URL。在向服务器发送数据时，我们需要使用encodeURIComponent方法对用户名和密码进行编码，以保证数据能够正确传输。 当Ajax请求的状态发生变化时，我们通过onreadystatechange事件监听函数获取服务器返回的数据。本例中，我们使用 JSON.parse 方法将服务器返回的 JSON 格式数据解析为 JavaScript 对象，并根据返回的数据进行相应的处理，例如显示登录成功或失败的提示信息等。 最后，在服务器端处理脚本中，我们可以接收通过Ajax提交的表单数据，并进行相应的处理和验证。处理完成后，处理结果可以以JSON格式返回给客户端。 综上所述，使用Ajax无跳转提交表单是一种方便、高效的Web开发技术。通过监听表单提交事件，使用XMLHttpRequest对象发送表单数据，并获取服务器的响应结果，就可以在不刷新整个页面的情况下完成表单数据的提交和处理。该技术不仅提高了用户体验，还减轻了服务器的负载。它是现代 Web 开发中常用的技术之一。
