网站入门

最新推荐文章于 2025-05-09 21:12:57 发布

weixin_33985679

最新推荐文章于 2025-05-09 21:12:57 发布

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

文章标签： java json 前端 ViewUI

原文链接：http://www.cnblogs.com/cqbstyx/p/10320374.html

这篇博客主要介绍了如何使用Java处理JSON数据，并在前端展示。内容涵盖了JSON的解析、序列化，以及如何在JavaScript中操作JSON对象，适合初学者入门。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第二章.创建web项目.
file->new->web project.
设置 java version 1.8
设置 Target Tomcat8.0
web项目下面src JAVA源码目录
WebRoot 网站目录
WEB-INF classes及lib目录.

webroot下添加HTML.
如何创建一个web项目,了解了web项目的一般结构.

2.2部署web项目.
1.创建web项目.

在浏览器打开网页时, 汉字出现乱码？
解决办法：手工修改html，在<head>里 添加 <meta charset='UTF-8' />
在tomcat目录下，<Host>标签内最后添加<Context path="/demo" docBase="E:\JavaWeb\demo0202\WebRoot"  />    
其中， docBase 指向 WebRoot目录的路径 ，path是网站的映射路径 
注意是WebRoot的目录，不是项目目录

第三章 Servlet
servlet 服务小程序.
java web很重要的功能.
在src下面的packge下面新建一个servlet
每次记得修改tomcat的server.xml的docBase
Servlet运行原理
        get/servlet
浏览器(客户端)--------------->Tomcat(服务器)
          <---------------
        200 OK 资源内容

tomcat在接收到客户端请求后,会根据请求的资源路径URI,来分派给不同的Servlet来处理
例如: /SimpleServlet ->my.SimpleServlet

3.2    创建时间服务
1.创建showtimeservlet服务.
2.修改@WebServlet("/ShowTimeServlet")->@WebServlet("/showtime")  //修改的就是uri的地址.
3.doGet代码修改.
response 是应答,request是请求.
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        SimpleDateFormat sdf =new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String timestr =sdf.format(new Date()); //当前时间
        response.getWriter().write("Now:" + timestr); //暂时不用中文避免乱码.
        
    }

注意:
1.uri区分大小写.

servlet运行原理
        get/servlet
浏览器(客户端)--------------->Tomcat(服务器)
          <---------------
        200 OK 时间
tomcat在接收到客户端请求后,会根据请求的资源路径URI,来分派给不同的Servlet来处理
例如: /SimpleServlet ->my.SimpleServlet
/showtime->my.ShowTimeServlet.

doGet()可以修改返回数值和方法.

3.3    生成HTML
添加一个Servlet,用于生成HTML页面.
-添加HtmlServlet
-映射URI为 /test/1.html (称为映射路径)

//映射路径  @WebServlet("/test/1.html")

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");     //设置字符集编码
        response.setContentType("text/html");         //设置内容格式
        PrintWriter out =response.getWriter();
        out.write("<html><body> 如何<html><body>");    //返回客户端的数据
    }

servlet运行原理
        get/test/1.html
浏览器(客户端)--------------->Tomcat(服务器)
          <---------------
        200 OK 时间

1.一个URI 可能是一个文件,也可能是一个Servlet
2.客户端不能区分,也没必要区分
3.如果既不是Servlet,又不是文件,返回404错误
4.如果即是Servlet,又是文件呢.

3.4    生成JavaScript
Jscript
@WebServlet("/sample.js")
public class JscriptServlet extends HttpServlet
{

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        response.setCharacterEncoding("UTF-8"); // 设置字符集编码
        response.setContentType("text/plain"); // 设置内容格式
        PrintWriter out = response.getWriter();

        // 返回一行javaScript文本
        out.write("var author='仁豪'; ");
        out.write("var name='yyf'; ");
    }

}
写一个.java文件
创建html,导入juery.js,
<html>
  <head>
    <title>RH.html</title>
       <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
       <script type="text/javascript" src="sample.js" ></script>
    

  </head>
  
  <body>
      <div class='main' style="height: 35px; ">    
      </div>
      <div class='ame'>
      </div>
    
  </body>
  
  <script>
      $('.main').html ( author + author );
    $('.ame').html (name + name);
  </script>
</html>

此外tomcat的配置         
<Context path="/demo" docBase="E:\javaweb\demo0201\WebRoot"
        reloadable="true" /> 
docBase写到WebRoot一级目录才行.

4.1    POJO
简单的java类.
-属性:简单类型 int String boolean...
-方法:Getter/Setter
POJO类可以重写toString()


4.2    JSON javascript对象的文本化表示
jar包放在WebRoot下面的WEB-INF 下面的lib里面,自动bulid path

JSON多用于数据传输
{
"id":20111111, //示例
"name":"仁豪",
"phone":"1300099";
}
使用JSON-ORG 或者jsonlib来操作JSON

其中，大括号表示一个JSON对象。在这个对象里，包含4个字段。
例如，
"id"    字段的值为  20180001，是数字类型 ( Number )
"name" 字段的值为 "邵",     是字符串类型 ( String ) 
"sex"  字段的值为 true，是布尔类型 (Boolean)

可以很直观的发现，
如果值是一个String，则应该用双引号，如"邵发"
如果值是一个Number，则不加双引号，如20180001
如果值是一个Boolean，则应该是 true 或者是 false, 不加双引号

加入JSON-java  JSON-lib

        JSONObject jobj = new JSONObject();
        jobj.put("id", 20180001); // Integer
        jobj.put("name", "邵发"); // String
        jobj.put("sex", true);   // Boolean
        jobj.put("cellphone", "13810012345"); // String
        
        String jsonstr = jobj.toString(2);
        System.out.println(jsonstr);


JSONObject里的字段显示顺序是无关的，谁先上、谁在下不影响最终结果。


    // POJO -> JSONObject
    // 如果是POJO对象 ( 已经添加了 getter )，则可以直接转成JSONObject
    public static void test3()
    {
        Student stu = new Student("邵发", 1238909, true, "13810012345");
        JSONObject j = new JSONObject(stu);
        String jsonstr = j.toString(2); // 缩进2
        System.out.println(jsonstr);
    }

JSON的语法格式
用JSON可以表示Object信息，以一对大括号包围，里面可以多个字段。
例如:
{
    "name": "邵发",
    "id": 1208439,
    "sex": true,
    "phone": "13810012345"
}
语法要点：
- 以大括号包围
- 字段名称要加双引号
- 字段的值可以为String, Integer, Boolean, Array, null 等类型
- 每个字段以逗号分隔 （最后一个字段末尾不能加逗号）
- 字段的顺序无关
注：JSONObject在概念上对应于Java里的Map


public class TestJson
{
    public static void test1()
    {
        Student pojo =new Student(20180001,"仁豪",true,"13800000");
        JSONObject jobj =new JSONObject(pojo);
        String js =jobj.toString(2);    //縮放為2是
        System.out.println(js);
    }
    
    public static void test2()
    {
        ArrayList<Student> students = new ArrayList();
        students.add(new Student(20180001,"仁豪",true,"13800000"));
        students.add(new Student(20180002,"x",true,"138000001"));
        students.add(new Student(20180003,"y",true,"138000002"));
        students.add(new Student(20180004,"z",true,"138000003"));
        
        JSONArray jarray =new JSONArray(students);
        System.out.println(jarray.toString(2));
        
    }
    public static void main(String[] args)
    {
        test2();
    }

}

直接添加一个main方法,单元测试.

4.3使用json
public class StudentQuery extends HttpServlet
{

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        ArrayList<Student> students = new ArrayList();
        students.add(new Student(20180001,"仁豪",true,"13800000"));
        students.add(new Student(20180002,"x",true,"138000001"));
        students.add(new Student(20180003,"y",true,"138000002"));
        students.add(new Student(20180004,"z",true,"138000003"));
        
        JSONArray jarray =new JSONArray(students);
        
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/plain");      //設置內容格式
        PrintWriter out = response.getWriter();
        
        //返回javascript文本
        out.write(jarray.toString(2));
    }
}

4.4    web项目的调试
java调试的一般方法.
1.打印调试.
2.单步调试
两者结合使用.

单步调试.
以debug方式运行服务器
点debug下面的debug configurations
选择tomcat8.0下面的source(来源)
add,javaproject
勾选目标project文件夹,然后ok ,apply,close.
然后在代码添加断点,在浏览器输入地址.
myeclipse弹出提示是否切换debug页面.
如果关闭,在Windows,show view里面找

source not found  ,第三方jar不用管.

web项目的调试,被调试的主体其实是tomcat程序,tomcat程序会间接的调用我们的servlet代码.

第五章 5.1    数据查询.
查询和显示数据库中的数据.
模拟:一个假的数据库.
DemoDb:用于模拟一个数据库.
实现一个查询功能,可以返回所有数据行.
URL查询.
@WebServlet("/QueryAll")
public class QueryAll extends HttpServlet
{

    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException
    {
        List<Student> rows = DemoDb.i.list();
        
        // List -> JSONArray
        JSONArray result = new JSONArray(rows);
        
        // 返回应答数据
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/plain");
        Writer writer = response.getWriter();
        writer.write( result.toString(2));
        writer.close();
    }

}

5.2    URL参数
按学号范围进行查询.
比如,查询20180001-20180004.
客户端需要把请求的参数发给服务器.
请求可以附在URL末尾
例如:http://127.0.0.1:8080/demo/QueryById?from=20180001&to=20180004

URL参数的写法规则:
1.以问号引导QueryById?xxxxx
2.多个参数对中间用&分开
示例:?key1=value1&key2=value2&key3=value3
3.中文参数比较复杂.

使用request.getParameter("...")获取URL的参数.
@WebServlet("/QueryById")
public class QueryById extends HttpServlet
{

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        //从request 里取得参数
        String strFrom = request.getParameter("from");
        String strTo = request.getParameter("to");    
        //参数处理
        int from = Integer.valueOf(strFrom);
        int to = Integer.valueOf(strTo);    
        //数据查询
        List<Student> rows = DemoDb.i.list(from, to);
        //List->JSONArray
        JSONArray result = new JSONArray(rows);
        //返回应答数据
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/plain");
        Writer writer =    response.getWriter();
        writer.write(result.toString(2));
        writer.close();            
    }

}

5.3    HTTP网络抓包演示
请求/应答模式.

Wireshark 网络鲨鱼.
可以抓取本机和其他机器的数据交互.
HTTP协议:应答数据.
HTTP/1.1 200状态码.
200-OK,可以访问
403-Forbidden 无权访问
404-Not Found 资源不存在
Content-Length:287
表示正文部分的长度为287字节
正文内容
    头部按行定义,每行末行为\r\n
    头部与正文之间有一个空行.

5.4    Chrome浏览器抓包
请求/应答 模式.
-F12,开发者工具.
-切换到network面板.
headers表示请求 response应答.

第六章
6.1    AJAX
后台提供的服务(接口),前台如何调用?
http://127.0.0.1:8080/demo6/QueryAll
http://127.0.0.1:8080/demo6/QueryById?from=1&to=10000000
前端希望取得后台数据,并且显示在页面上.

AJAX,一种在网页上调用后台接口的方式.
后台接口:指后台代码实现的服务
类似 /demo/QueryAll    /demo/QueryById

jQuery里提供的AJAX调用方法.
示例: $.ajax({...参数...})
其中,
-$.ajax()等同于jQuery.ajax()
-参数里面是一个JS对象

test.html

<!DOCTYPE html>
<html>
<head>
<title>test.html</title>
<meta charset='UTF-8' >
<script type="text/javascript" src="js/query.min.js"></script>
</head>

<body>
    <div