ajax提交form表单 web端编写

编写web端ajax提交form表单需要以下步骤：

1. 首先，在HTML页面中创建一个form表单，并添加需要提交的各种表单元素，如输入框、下拉框等。

2. 为form表单添加一个id属性，以便在JavaScript中引用。

3. 在JavaScript中获取form元素，并为其绑定submit事件。

4. 在submit事件的回调函数中，使用event.preventDefault()方法来阻止表单的默认提交行为。

5. 创建一个FormData对象，并使用该对象来收集表单数据。可以通过FormData.append()方法来添加各个表单字段的值。

6. 创建一个XMLHttpRequest对象，并使用其open()方法来指定提交方式和地址。例如，使用POST方式提交可以这样写：xhr.open("POST", "submit.php", true)。

7. 设置请求头信息，告知服务器提交的数据类型是FormData格式，可以通过xhr.setRequestHeader()方法来设置。

8. 设置xhr的onreadystatechange事件回调函数，用来处理服务器响应。

9. 发送请求，使用xhr.send(formData)方法发送。

10. 在onreadystatechange回调函数中，判断xhr.readyState是否为4，表示服务器已经返回了完整的响应。

11. 在判断xhr.status是否为200，表示服务器返回的响应成功。

12. 如果响应成功，可以通过xhr.responseText获取服务器返回的数据，并进行相应的处理。例如，可以将返回的数据显示在页面上。

以上就是使用ajax提交form表单的基本步骤。通过js中的DOM操作，可以获取表单中的数据，然后使用ajax技术将数据提交到服务器端进行处理。这样可以避免页面刷新，提升用户体验。同时，在服务器端接收到请求后，需要进行相应的处理，并返回合适的响应数据给前端。