s: function(data) { var arr = eval("(" + data.d + ")"); var str = ""; for (var i = 0; i < arr.length; i++) { str += arr[i] + "<br/>"; } alert(str); }, error: function(err) { alert(err); } }); //禁用按钮的提交 return false; }); }) 运行效果如下：
在Web开发中，jQuery AJAX是前端与后台进行异步数据交互的重要技术。AJAX（Asynchronous JavaScript and XML）允许我们无需刷新整个页面就能与服务器交换数据并局部更新页面。jQuery库简化了AJAX操作，使得开发者能够更加便捷地实现前后端通信。
在上述示例中，我们看到如何使用jQuery AJAX调用ASP.NET页面的后台方法。以下是关键知识点的详细说明：
1. **Web服务方法**：在后台代码中，我们使用`[WebMethod]`特性标记静态方法，使其能够通过HTTP请求被调用。例如，`SayHello()`和`GetStr()`方法是可以通过AJAX访问的。
2. **AJAX调用配置**：在JavaScript中，`$.ajax()`函数用于设置AJAX请求。关键参数包括：
- `type`: 指定请求类型，通常为"GET"或"POST"。
- `url`: 后台方法所在的URL，如`"Demo.aspx/SayHello"`。
- `contentType`: 定义发送到服务器的数据格式，这里是JSON。
- `dataType`: 预期服务器返回的数据类型，这里也是JSON。
- `success`: 成功回调函数，处理服务器返回的数据。
- `error`: 错误回调函数，处理请求失败的情况。
3. **数据传递**：在`data`参数中，我们可以传递要发送到后台的方法参数。例如，对于`GetStr()`方法，我们使用JSON格式的字符串`"{'str':'我是','str2':'XXX'}"`。
4. **返回值处理**：当服务器响应成功时，`success`回调函数中的`data`参数包含了服务器返回的JSON数据。在ASP.NET中，由于JSON.NET的使用，返回的对象会被包裹在`d`属性内，所以我们通常使用`data.d`来获取实际内容。
5. **返回数组或列表**：在`GetArray()`方法中，后台返回一个字符串列表。在JS中，我们需要将JSON字符串转换为JavaScript数组，这里使用`eval()`函数解析JSON字符串。然后遍历数组并显示每个元素。
6. **错误处理**：`error`回调函数处理请求出错的情况，通常会弹出警告框显示错误信息。
7. **禁用提交**：在按钮点击事件中，使用`return false;`防止表单的默认提交行为，确保页面不会被刷新。
通过以上步骤，我们可以实现使用jQuery AJAX从页面前端调用后台方法，获取数据并更新页面内容，从而实现页面的动态更新，提高用户体验。在实际开发中，可以根据需求调整这些方法，例如添加请求前后的加载动画，或者处理更多复杂的请求参数和返回数据类型。
