前端与后端交互示例-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36513733/article/details/82286732

案例一：

前端代码：

后台代码：

    // fastjson 使用（https://blog.youkuaiyun.com/wild46cat/article/details/52883081）
       Map<String, Object> map=(Map<String,Object>)JSON.parse(res.getParameter("user"));
       System.out.println(map.get("name"));//将对象转成MAP数组，可以直接get属性值得到值

       //jackson 使用（https://blog.youkuaiyun.com/zmx729618/article/details/52161069）
       ObjectMapper mapper=new ObjectMapper();//实例化帮助器
       Human man=mapper.readValue(res.getParameter("user"),Human.class);//将JSON转成对象
       String myjson = mapper.writeValueAsString(man);//将对象转JSON
       System.out.println(man.toString());
       System.out.println(myjson);

       PrintWriter out=rp.getWriter();//实例化打印器
       out.print("yes");//返回消息给前台，可以是普通文本，可以是JSON

案例二：

前端代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">

<title>Refresh Test</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 src="js/jquery.serializejson.js"></script>
   <script type="text/javascript">

       function boby(vars){
               return "<tr><td>"+vars.name+"</td><td>"+vars.password+"</td></tr>";//简单的HTML语句
       }

   //val()-->值
   //text()-->表单信息
   //html()-->innerHTML
       function load(index){
           if(index=="")return;//判断input输入数字后是否为空
               $.ajax({
                   type:"POST",
                   url:"testRefresh.do",
                   data:{"index":index},//传递页数
                   dataType: "text",
                   success: function (data){
                       if(data=="200"){
                           alert("请输入正确的页码");
                           return;}//后台报错
                       $("#table").html("");//如果数据成功获得，将表格清空
                       var lists=eval("("+data+")");//将后台发回来的JSON转成数组
                       for(var i=0;i<lists.length;i++){//迭代
                           $("#table").html(($("#table").html()+boby(lists[i])));//给表格赋值
                       }
                       $('#index').val(index==null||index<1?1:index);//给input里面的页数赋值
                   }
               });
       }

   </script>

</head>

<body οnlοad="load(1)">

<table id="table">
</table>

<input type="button" value="上一页" οnclick="load(parseInt($('#index').val())-1)"/>
<input id="index" type="text" οnkeyup="load($('#index').val())" style="width: 30px" />
<input type="button" value="下一页" οnclick="load(parseInt($('#index').val())+1)"/>

</body>

</html>

后台代码：

package Servlets;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;

import Entity.Human;

public class testRefresh extends HttpServlet{

   private List<Human> lists=new ArrayList<Human>();//数据承载
   private int size=10;//可以实现前端传入

   private String getJson(int page){
       lists.clear();//每次取数据之前把数据清空
       for (int i = (page*size)-9; i <= page*size; i++) {//模拟分页
           lists.add(new Human("zengheng"+i, "1509755661"));//放入模拟数据
       }
       try {
           return new ObjectMapper().writeValueAsString(lists);//将数据写成JSON
       } catch (Exception e) {
       //TODO: handle exception
           return null;
       }
   }

   @Override
   protected void doGet(HttpServletRequest req, HttpServletResponse resp)
           throws ServletException, IOException {
       // TODO Auto-generated method stub
       doPost(req, resp);
   }

   @Override
   protected void doPost(HttpServletRequest request, HttpServletResponse response)
           throws ServletException, IOException {
       PrintWriter print=response.getWriter();
       try {
           print.write(getJson(Integer.parseInt(request.getParameter("index"))));//写出JSON
       } catch (Exception e) {
           // TODO: handle exception
           print.write("200");//报错非法字符（"" 以及符号）
       }
       finally{
           print.flush();
           print.close();
       }
   }