使用jQuery AJAX异步提交表单

本示例展示了一个使用jQuery实现的AJAX异步提交表单的实例。 在网页开发中，AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。在这个例子中，我们看到的是一个使用jQuery库实现的AJAX异步提交表单的代码片段。 首先，引入了jQuery库（jquery-3.2.1.js），这是实现AJAX功能的基础。jQuery简化了JavaScript的DOM操作和事件处理，同时也提供了方便的AJAX方法。 在`$(document).ready()`函数中，我们设置了一个事件监听器，当用户点击ID为"button"的按钮时，会触发AJAX请求。这个按钮被定义在HTML的`<form>`元素内，包含两个输入字段（name和password）。 `$.ajax()`是jQuery提供的一个核心函数，用于发起AJAX请求。其主要参数包括： - `url`: 指定服务器端处理请求的地址，这里是"http://localhost:8080/ajax/jq10"。 - `data`: 要发送到服务器的数据，这里使用`$("#form1").serialize()`方法获取表单的所有数据，将其序列化成URL编码格式。 - `type`: 请求类型，这里是"post"，表示使用POST方法提交数据。 - `dataType`: 预期服务器返回的数据类型，这里是"json"，意味着服务器应返回JSON格式的数据。 - `async`: 异步标志，设置为`false`表示同步请求，即请求发送后会阻塞后续代码直到请求完成。通常情况下，AJAX请求应该是异步的，但此处为了演示，可能是为了便于观察结果而设置为同步。 - `success`: 成功回调函数，当服务器响应且状态码为200时执行。这里的`data`参数是服务器返回的数据，可以进行进一步处理，例如弹出警报显示`data.name`的值。 - `error`: 错误处理函数，当请求失败时执行。这个示例中，错误处理函数没有做任何操作，仅弹出一个空警告框。 这段代码演示了如何使用jQuery的AJAX功能来异步提交表单，并在成功接收服务器响应后处理返回的数据。在实际应用中，开发者可能会根据需求对错误处理函数进行更细致的定制，以及利用返回的数据更新页面的相应部分，而不是仅仅弹出警告。