这篇文章讲的是jQuery里的ajax发送data的三种方式，利用ajax发送数据的好处是把数据发送到了servlet后，当前页面不进行跳转。
jQuery的里的ajax发送data的方式主要有三种，分别是json数组，url拼接和表单的序列化serialize，这里要配合servlet一起。
第一种：url拼接（下面内容顺序：jsp代码，servlet代码，实验图片）
jsp代码，命名：”a.jsp”。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function(){ var myClick=function(){ var mySuccess=function(result){ alert(result); } var myError=function(XMLHttpRequest,textstatus){ if(XMLHttpRequest.status==404){ alert("找不到页面404错误"); } else if(XMLHttpRequest.status==500){ alert("服务器异常500错误"); }else{ alert("服务器出现异常，请稍后重试"); } } $.ajax({ //把数据发到哪里去 url:'A?content='+$("#content").val(), //要调用servlet里的方法（doget或dopost） type:'GET', //返回的数据类型（可以没有） dataType:'text', //成功的话，调用函数 success:mySuccess, //失败调用函数 error:myError, //如果相应时间超过三秒就会出错 timeout:3000 }); } $("#abc").click(myClick); }); </script> <title>Insert title here</title> </head> <body> <input id="content" type="text" value="This is content"> <input id="abc" type="button" value="click"> </body> </html>
servlet代码，取名：A.java
package web; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/A") public class A extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String content = request.getParameter("content"); System.out.println(content); PrintWriter out =response.getWriter(); //下面注释了的代码是让servlet停三秒在做出反应 /** try { Thread.sleep(3000); } catch (InterruptedException e) { System.out.println("代码出错"+e.getMessage()); }*/ out.println(content); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
效果图
第二方式：json
jsp代码（servlet代码可以用上面的），取名b.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function(){ var myClick=function(){ var myData={ content : $("#content").val() } var mySuccess=function(result){ alert(result); } var myError=function(XMLHttpRequest,textstatus){ if(XMLHttpRequest.status==404){ alert("找不到页面404错误"); } else if(XMLHttpRequest.status==500){ alert("服务器异常500错误"); }else{ alert("服务器出现异常，请稍后重试"); } } $.ajax({ //把数据发到哪里去 url:'A', //要调用servlet里的方法（doget或dopost） type:'GET', //数据 data:myData, //返回的数据类型（可以没有） dataType:'text', //成功的话，调用函数 success:mySuccess, //失败调用函数 error:myError, //如果相应时间超过三秒就会出错 timeout:3000 }); } $("#abc").click(myClick); }); </script> <title>Insert title here</title> </head> <body> <input id="content" type="text" value="This is content"> <input id="abc" type="button" value="click"> </body> </html>
效果图
第三种：serialize序列化
jsp代码（servlet用上面的），取名：c.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function(){ var myClick=function(){ var myData=$("#content").serialize(); var mySuccess=function(result){ alert(result); } var myError=function(XMLHttpRequest,textstatus){ if(XMLHttpRequest.status==404){ alert("找不到页面404错误"); } else if(XMLHttpRequest.status==500){ alert("服务器异常500错误"); }else{ alert("服务器出现异常，请稍后重试"); } } $.ajax({ //把数据发到哪里去 url:'A', //要调用servlet里的方法（doget或dopost） type:'GET', //数据 data:myData, //返回的数据类型（可以没有） dataType:'text', //成功的话，调用函数 success:mySuccess, //失败调用函数 error:myError, //如果相应时间超过三秒就会出错 timeout:3000 }); } $("#abc").click(myClick); }); </script> <title>Insert title here</title> </head> <body> <input id="content" type="text" value="This is content"> <input id="abc" type="button" value="click"> </body> </html>
效果图
第一部分： http://www.cnblogs.com/memory9770/p/7236407.html