ajaxl利用json 传送数据的 三种提交方式？
一、在servlet类中添加几个javabean对象，放置数据。
package com.aaa.servlet; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.aaa.entity.User; import com.alibaba.fastjson.JSON; @WebServlet("/DemoServlet") public class DemoServlet extends HttpServlet { public DemoServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); List<User>list=new ArrayList<>(); User u1 = new User(1,"哈哈","565"); User u2 = new User(1,"嘻嘻","666"); User u3 = new User(1,"吉吉","999"); list.add(u1); list.add(u2); list.add(u3); //将制定的对象 ，转换成json对象 String result=JSON.toJSONString(list); response.getWriter().write(result); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
二、创建jsp文件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!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"> <title>Insert title here</title> </head> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> <script type="text/javascript"> /* ajax利用json进行数据传送的三种方式？ 1.导入jQuery 包 2.导入三个jar包 1.fastjson-1.2.9.jar 2.taglibs-standard-impl-1.2.5.jar 3.taglibs-standard-spec-1.2.5.jar 三个参数 1跳转到后台的URL地址 2.需要向跳转的后台servlet传递的参数 3.回调函数，用户接受收后台响应过来的对象 backdate status xmlhttpreque */ function getTestGet(){ $.get( "<c:url value='/DemoServlet'/>", // 需要跳转到后台的URL地址 {"name":"test"}, // 需要向跳转到后台的servlet传递的参数 function(backData,status,xmlHttpRequest){ //回调函数 //得到本次ajax请求响应的文本内容 var result=eval(backData); alert(result[2].password); alert(status+"----status"); alert(xmlHttpRequest+"---"); }); } //2.post 的提交方式 function getTestPost(){ $.post( "<c:url value='/DemoServlet'/>", {"name":"test"}, function(backData,status,xmlHttpRequest){ //回调函数的函数体 用于解析异步请求的servlet响应过来的信息内容 alert(backData[0].username); alert(status+"--status"); //得到本次ajax请求响应的文本内容和 backdate相似 //xmlhttprequest 不需要参数时 可以省略 alert(xmlHttpRequest.rsponseText+"---"); },"json"); } //3.ajax 的提交方式 function getTestAjax(){ $.ajax({ type:"get", url:"<c:url value='DemoServlet'/>", dataType:"json", success:function(backData,status,xmlHttpRequst){ //类似于 foreach 便利的作用。 $.each(backData,function(i,u){ alert(i+"--"+u.username+"---"+u.password); }); }, error:function(xmlHttpRequest,status,errorThrown){ alert("出错了！"); } }); } </script> <body> <input type="button" onclick="getTestGet();" value="get的提交方式"/> <input type="button" onclick="getTestPost();" value="post的提交方式"/> <input type="button" onclick="getTestAjax();" value="ajax"/> </body> </html>
