使用jquery执行ajax
$.ajax():返回其创建的XMLHttpRequest对象
回调函数：
如果要处理$.ajax()得到的数据，则应该使用回调函数！
beforeSend：在发送请求之后调用，需要一个XMLHttpRequest作为参数
error：请求出错后调用。参数XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象
dataFilter 在请求成功之后调用。传入返回的数据以及“dataType“参数的值。并且必须返回新的数据（可以是处理过的），传递给success函数
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数，无论成败。传入XMLHttpRequest对象以及一个带有成功错误信息的字符串。
数据类型：
$.ajax()函数依赖服务器提供的信息处理返回的数据。如果服务器报告是返回数据xml，可以使用普通xml方法或者jquery选择器。其他类型使用文本形式对待
dataType可以指定数据处理方式。除了淡村的XML，还可以指定html、json、jsonp、script或者text
其中text和xml不会处理，返回XMLHttpRequest的responseText或responseHTML得到的值
注意：如果返回的是xml，在服务端必须声明text/xml或者application/xml来获得一致结果
如果指定为json类型，会将获取到的数据作为一个javaScript对象解析，并将构建好的对象返回
发送数据到服务器
默认情况下Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值
date选项可以包含一个查询字符串，比如key1=value1&key2=value2，也可以是一个映射，如：{key1：‘value1’，key2：‘value2’}
例子1：加载并执行js文件：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP '01.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ $.ajax({ type:"GET", url:"js/test.js", dataType:"script" }); }); }); </script> </head> <body> <button>点击我</button> <h1></h1> </body> </html>
alert("Hello,js");
例子2：保存数据到服务器，成功时显示信息：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP '01.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ $.ajax({ type:"POST", url:"<c:url value='/AServlet'/>", data:"name=John&location=Boston", success:function(msg){ //$("h1").html(msg); alert("Date Saved:"+msg); } }); }); }); </script> </head> <body> <button>点击我</button> <h1></h1> </body> </html>
public class AServlet extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); String name=request.getParameter("name"); String location=request.getParameter("location"); response.getWriter().print("得到的信息"+name+"--"+location); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } }
例子3：装载html
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP '01.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ $.ajax({ url:"html/test.html", success:function(msg){ $("h1").append(msg); } }); }); }); </script> </head> <body> <button>点击我</button> <h1></h1> <h3>你好啊</h3> </body> </html>
<!DOCTYPE html>
<html>
<head>
<title>test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
使用$.get(url,[data],[callback],[type])
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP '01.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ $.get("AServlet", {name:"John",location:"Boston"}, function(msg){ alert("Date Saved:"+msg); }); }); }); </script> </head> <body> <button>点击我</button> <h1></h1> </body> </html>
package cn.itcast.servlet; 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 AServlet extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); String name=request.getParameter("name"); String location=request.getParameter("location"); response.getWriter().print("得到的信息"+name+"--"+location); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); String name=request.getParameter("name"); String location=request.getParameter("location"); response.getWriter().print("得到的信息"+name+"--"+location); } }
serialize():
这个方法可以序列化表格内容为字符串。可以配合ajax使用
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP '01.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ $("#results").append("<tt>"+$("form").serialize()+"</tt>"); }); </script> </head> <body> <button>点击我</button> <p id="results"><b>Results:</b></p> <form> <select name="single"> <option>Single</option> <option>Single2</option> </select> <select name="multiple" multiple="multiple"> <option selected="selected">Multipart</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select><br/> <input type="checkbox" name="check" value="check1"/>check1 <input type="checkbox" name="check" value="check2" checked="checked">check2 <input type="radio" name="radio" value="radio1" checked="checked"/>radio1 <input type="radio" name="radio" value="radio2" />radio2 </form> </body> </html>
serializeArray():
这个方法可以序列化表单成json对象而不是字符串
$.post
使用了serialize()和$.post(url,[data],[callback],[type])的小例子：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP '01.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ $("input[type='button']").click(function(){ $.post( "BServlet", $("form").serialize(), function(msg){ alert(msg); }); }); }); </script> </head> <body> <form> 用户名:<input type="text" name="username"><br/> 密码：<input type="password" name="password"><br/> <input type="button" value="测试一下"> </form> </body> </html>
package cn.itcast.servlet; 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 BServlet extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); String username=request.getParameter("username"); String password=request.getParameter("password"); response.getWriter().print(username+"---"+password); System.out.println(username+"---"+password); } }
