Ajax相关方法，两个工具方法（serialize(),serializeArray()）
<body>
<form id="test">
用户名：
<input id="user" name="user" type="text" />
<br />
个人介绍：
<textarea id="desc" name="desc"></textarea>
<br />
喜欢的图书：
<select id="book" name="book">
<option value="java">
Java
</option>
<option value="javaee">
Java EE
</option>
<option value="ajax">
Ajax
</option>
</select>
</form>
<button id="bn1">
查询字符串
</button>
<button id="bn2">
查询JSON对象
</button>
<hr />
<span id="show"></span>
<script type="text/javascript">
//为id为bn1的按钮绑定事件处理函数
$("#bn1").click(function() {
//将id为test1的表单转换为查询字符串
$("#show").html($("#test").serialize());
});
//为id为bn2的按钮绑定事件处理函数
$("#bn2").click(function() {
//将所有输入元素转换为数组
var arr = $(":input").serializeArray();
$("#show").empty();
//遍历arr数组
for ( var index in arr) {
$("#show").append(
"第" + index + "表单控件名为：" + arr[index].name + ",值为："
+ arr[index].value + "<br />");
}
});
</script>
</body>
Ajax相关方法,load()方法的使用
<body>
<center>
<h3>使用load来发送Ajax请求很简便，开发者不需要考虑XMLHttpRequest的细节，</h3>
<h3>要是开发者想要管理Ajax请求的细节，则可以考虑jQuery.ajax(options)的方法</h3>
</center>
<h3>
请输入你的信息：
</h3>
<form id="user">
用户名:
<input type="text" name="user" />
<br />
喜欢的图书:
<select multiple="multiple" name="books">
<option value="java">
Java
</option>
<option value="javaee">
Java EE
</option>
<option value="ajax">
Ajax
</option>
<option value="xml">
XML
</option>
</select>
<br />
<input id="load" type="button" value="Load" />
</form>
<hr />
<div id="show"></div>
<script type="text/javascript">
//为id为load的按钮绑定事件处理函数
$("#load").click(function() {
//向pro.jsp发送Ajax请求，并自动加载服务器响应
$("#show").load("LoadServlet", $("#user").serializeArray());
});
</script>
</body>
Ajax相关方法,使用get/post方法请求（下面是script.jsp代码）
<body>
<h3>
请输入你的信息：
</h3>
<form id="user">
用户名:
<input type="text" name="user" />
<br />
喜欢的图书:
<select multiple="multiple" name="books">
<option value="java">
Java
</option>
<option value="javaee">
Java EE
</option>
<option value="ajax">
Ajax
</option>
<option value="xml">
XML
</option>
</select>
<br />
<input id="load" type="button" value="发送异步GET请求" />
</form>
<hr />
<div id="show"></div>
<script type="text/javascript">
//为id为load的按钮绑定事件处理函数
$("#load").click(function() {
//指定向pro.jsp发送请求，以id为user表单里各表单空间作为请求参数
$.get("LoadServlet", $("#user").serializeArray(),
//指定回调函数
function(data, statusText) {
$("#show").empty();
$("#show").append("服务器响应状态为：" + statusText + "<br />");
$("#show").append(data);
},
//指定服务器响应为html
"html");
});
</script>
</body>
使用jQuery的getScript方法
<body>
<ul style="display: none">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<input id="get" type="button" value="getScript" />
<div id="show"></div>
<script type="text/javascript">
//为id为get的按钮绑定事件处理函数
$("#get").click(function() {
$.getScript("script.jsp");
});
</script>
</body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用jQuery的getScript方法</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/jquery-1.4.3.js" type="text/javascript"></script>
</head>
<body>
<ul style="display: none">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<input id="get" type="button" value="getScript" />
<div id="show"></div>
<script type="text/javascript">
//为id为get的按钮绑定事件处理函数
$("#get").click(function() {
$.getScript("script.jsp");
});
</script>
</body>
</html>
上面所有的请求都是LoadServlet
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoadServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String user = request.getParameter("user");
String[] books = request.getParameterValues("books");
out.println(user + ",你好，现在时间是：" + new java.util.Date());
out.println("<br>你喜欢的图书如下：");
out.println("<ol>");
for (int i = 0; i < books.length; i++) {
out.println("<li>" + books[i] + "</li>");
}
out.println("</ol>");
}
}
相关推荐
jQuery 中 AJAX 常用的方法总结 jQuery 是一个功能强大且流行的 JavaScript 库，它提供了许多有用的方法来处理 AJAX 请求。AJAX（Asynchronous JavaScript and XML）是一种创建交互式网页的技术，它允许网页从...
**jQuery的Ajax方法**是JavaScript库中的核心特性之一，它为开发者提供了简单、高效的数据交互方式，无需刷新页面即可实现异步与服务器进行通信。在Web开发中，jQuery的Ajax功能极大地简化了XMLHttpRequest对象的...
2. JQueryAjax教程讲解.ppt：这可能是关于使用jQuery进行AJAX请求的详细讲解，包括$.ajax()函数，$.get()和$.post()方法的使用，以及如何处理回调函数。 3. Jquery(很好的PPT教程-技术较为全面-分享给大家).ppt：这...
1. jQuery的AJAX方法：在文章中，通过使用jQuery提供的$.ajax()方法来发起异步请求。这个方法允许我们指定请求的类型（如GET或POST）、URL地址、传递的数据以及当请求成功时如何处理返回的数据。 2. 后台数据的返回...
**二、jQuery的Ajax相关方法** 1. **$.getJSON()**：用于获取JSON格式的数据，如： ```javascript $.getJSON('your-url', function(data) { // 处理JSON数据 }); ``` 2. **$.load()**：用于加载HTML片段并...
jquery中ajax请求后台数据成功后既不执行success也不执行error，此外系统报错：Uncaught SyntaxError: Unexpected identifier at Object.success，但后台能够返回数据，原代码如下： var source=[]; $.ajax({ ...
jQuery的$.ajax()方法是实现跨域Ajax请求的核心。$.ajax()可以接受一系列参数，其中关键的两个是`url`（指定要请求的远程服务地址）和`dataType`（指定返回数据的类型，如json、xml等）。为了实现跨域，我们需要设置...
在本聊天室中，jQuery提供了方便的方法来操作DOM元素，监听用户输入，以及发起Ajax请求。 2. **Ajax**：Ajax的核心是创建XMLHttpRequest对象，用于与服务器进行异步通信。在聊天室中，当用户发送消息时，jQuery的$....
在HTML页面中，我们可以使用jQuery的`$.ajax()`方法来调用这个WebMethod。以下是一个简单的例子： ```javascript $.ajax({ type: "POST", url: "Default.aspx/HelloWorld", contentType: "application/json; ...
在Asp.Net MVC框架中，jQuery和AJAX的结合使用极大地提升了用户体验，使得网页能够实现异步数据交互，无需刷新整个页面即可完成数据的增删查改操作。本实例将深入探讨如何在Asp.Net MVC项目中应用jQuery与AJAX。 一...
在Web开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理以及Ajax交互。本主题聚焦于jQuery中的Ajax功能，特别是如何利用它进行异步用户名验证。Ajax，即Asynchronous JavaScript and ...
AJAX（异步JavaScript和XML）技术在现代Web开发中扮演着关键角色，而jQuery的ajax方法则提供了简洁的API来实现这一功能。 首先，我们来看`bean - json`的转化。在Web服务中，我们经常需要在服务器端处理Java Bean...
扩展jquery的ajax方法，可以处理一些ajax请求的共通问题，比如ajax请求出错之后跳转的问题。
**jQuery AJAX分页技术详解** 在Web开发中，分页是一种常见的数据展示方式，它能够有效地组织大量数据，提高页面加载速度，优化用户体验。jQuery，一个轻量级、功能丰富的JavaScript库，结合AJAX（异步JavaScript和...
jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了前端开发中的许多任务，尤其是处理 AJAX（Asynchronous JavaScript and XML）请求。AJAX 是一种在不刷新整个网页的情况下，允许部分网页内容异步更新的技术。...
3. **AJAX请求**：在`validateUsername()`函数中，创建XMLHttpRequest对象或者使用jQuery的`$.ajax()`方法。我们发送一个POST或GET请求到服务器，携带用户名数据。 ```javascript function validateUsername() { ...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript的使用，尤其是在处理DOM操作、事件处理和Ajax交互等方面。"基于jQuery的ajax对话框"是一个利用jQuery实现的功能，它可以在不刷新整个...
在IT行业中，jQuery和ajax是两个非常重要的技术，它们在构建动态、交互性强的Web应用程序时发挥着关键作用。在这个“jQuery+ajax实现三级级联”的实例中，我们主要探讨如何利用这两种技术来创建一个能够逐级联动的...
在这个项目中，主要使用了以下jQuery的AJAX相关函数： 1. **$.get()**：用于发送GET请求。例如： ```javascript $.get('url', function(data) { // 处理返回的数据 }); ``` 2. **$.post()**：用于发送POST请求...