乐趣区

关于后端:SSM系列教材-七-框架做前后端分离

jiezi

=====================

步骤 1: 先运行，看到成果，再学习
步骤 2: 模拟和排错
步骤 3: 本知识点成果
步骤 4:jquery.min.js
步骤 5:json 中文问题
步骤 6:CategoryController
步骤 7:submit.html
步骤 8:getOne.html
步骤 9:getMany.html

步骤 1 : 先运行，看到成果，再学习

老规矩，先下载下载区 (点击进入) 的可运行我的项目，配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的成果。

步骤 2 : 模拟和排错

在确保可运行我的项目可能正确无误地运行之后，再严格照着教程的步骤，对代码模拟一遍。
模拟过程不免代码有出入，导致无奈失去冀望的运行后果，此时此刻通过比拟 正确答案 (可运行我的项目) 和本人的代码，来定位问题所在。
采纳这种形式，学习有成果，排错有效率，能够较为显著地晋升学习速度，跨过学习路上的各个槛。

举荐应用 diffmerge 软件，进行文件夹比拟。把你本人做的我的项目文件夹，和我的可运行我的项目文件夹进行比拟。
这个软件很牛逼的，能够晓得文件夹里哪两个文件不对，并且很显著地标记进去
这里提供了绿色装置和应用教程：diffmerge 下载和应用教程

步骤 3 : 本知识点成果

本知识点成果有三个，别离是以 json 形式：提交，获取单个和获取多个
提交

http://localhost:8080/ssm/submit.html

获取单个

http://localhost:8080/ssm/getOne.html

获取多个

http://localhost:8080/ssm/getMany.html

步骤 4 : jquery.min.js

因为要应用 jquery 进行提交和解析 json 格局数据，所以须要在把下载区 (点击进入) 的 jquery.mini.js 复制到 WebContent 目录下先

步骤 5 : json 中文问题

尽管在 spring mvc 中文问题里曾经提供了过滤器进行 ssm 的中文解决，然而 json 解决还要加点额定的内容。
把本来的

<mvc:annotation-driven />

批改为如下：

<mvc:annotation-driven >
    <mvc:message-converters register-defaults="true">
        <bean class="org.springframework.http.converter.StringHttpMessageConverter">
            <property name="supportedMediaTypes" value="text/plain;charset=UTF-8" />
        </bean>
    </mvc:message-converters>
</mvc:annotation-driven>
        <?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx" xmlns:jdbc="http://www.springframework.org/schema/jdbc"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.0.xsd
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">

<context:annotation-config/>
<context:component-scan base-package="com.how2java.controller">
    <context:include-filter type="annotation"
                            expression="org.springframework.stereotype.Controller"/>
</context:component-scan>
<mvc:annotation-driven >
    <mvc:message-converters register-defaults="true">
        <bean class="org.springframework.http.converter.StringHttpMessageConverter">
            <property name="supportedMediaTypes" value="text/plain;charset=UTF-8" />
        </bean>
    </mvc:message-converters>
</mvc:annotation-driven>
<mvc:default-servlet-handler />
<bean
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="viewClass"
              value="org.springframework.web.servlet.view.JstlView" />
    <property name="prefix" value="/WEB-INF/jsp/" />
    <property name="suffix" value=".jsp" />
</bean>
</beans>

步骤 6 : CategoryController

控制器里提供 3 个办法，别离用来解决 json 提交，json 获取单个对象，json 获取多个对象

package com.how2java.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSONObject;
import com.how2java.pojo.Category;
// 通知 spring mvc 这是一个控制器类
@Controller
@RequestMapping("")
public class CategoryController {
    @ResponseBody
    @RequestMapping("/submitCategory")
    public String submitCategory(@RequestBody Category category) {System.out.println("SSM 承受到浏览器提交的 json，并转换为 Category 对象:"+category);
        return "ok";
    }
    @ResponseBody
    @RequestMapping("/getOneCategory")
    public String getOneCategory() {Category c = new Category();
        c.setId(100);
        c.setName("第 100 个分类");
        JSONObject json= new JSONObject();
        json.put("category", JSONObject.toJSON(c));
        return json.toJSONString();}
    @ResponseBody
    @RequestMapping("/getManyCategory")
    public String getManyCategory() {List<Category> cs = new ArrayList<>();
        for (int i = 0; i < 10; i++) {Category c = new Category();
            c.setId(i);
            c.setName("分类名称:"+i);
            cs.add(c);
        }
        return JSONObject.toJSON(cs).toString();}

}

步骤 7 : submit.html

提交胜利后，在 tomcat 控制台查看应用 json 形式提交的数据

注： 不要在 eclipse 自带的浏览器外面点击，自带的浏览器有 bug，有时候不能辨认 jquery, 会导致点击没有反馈。应用独立的浏览器，比方 chrome,firefox 点击测试

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> 用 AJAX 以 JSON 形式提交数据 </title>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<form >
    id：<input type="text" id="id" value="123" /><br/>
    名称：<input type="text" id="name" value="category xxx"/><br/>
    <input type="button" value="提交" id="sender">
</form>
<div id="messageDiv"></div>

<script>
    $('#sender').click(function(){var id=document.getElementById('id').value;
        var name=document.getElementById('name').value;
        var category={"name":name,"id":id};
        var jsonData = JSON.stringify(category);
        var page="submitCategory";

        $.ajax({
            type:"post",
            url: page,
            data:jsonData,
            dataType:"json",
            contentType : "application/json;charset=UTF-8",
            success: function(result){}});
        alert("提交胜利，请在 Tomcat 控制台查看服务端接管到的数据");

    });
</script>
</body>

</html>

步骤 8 : getOne.html

点击按钮，获取 json 数据

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> 用 AJAX 以 JSON 形式获取数据 </title>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<input type="button" value="通过 AJAX 获取一个 Hero 对象 ---" id="sender">

<div id="messageDiv"></div>

<script>
    $('#sender').click(function(){
        var url="getOneCategory";
        $.post(
            url,
            function(data) {var json=JSON.parse(data);
                var name =json.category.name;
                var id = json.category.id;
                $("#messageDiv").html("分类 id："+ id + "<br> 分类名称:" +name);

            });
    });
</script>
</body>

</body>
</html>

步骤 9 : getMany.html

点击按钮，获取多个 json 数据

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> 用 AJAX 以 JSON 形式获取数据 </title>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<input type="button" value="通过 AJAX 获取多个 Hero 对象 111" id="sender">

<div id="messageDiv"></div>

<script>
    $('#sender').click(function(){
        var url="getManyCategory";
        $.post(
            url,
            function(data) {console.log(data);
                var categorys = $.parseJSON(data);
                console.log(categorys.length);

                for(i in categorys){var old = $("#messageDiv").html();
                    var category = categorys[i];
                    $("#messageDiv").html(old + "<br>"+category.id+"-----"+category.name);
                }
            });
    });
</script>
</body>

</body>
</html>

更多内容，点击理解：https://how2j.cn/k/ssm/ssm-json/1575.html

退出移动版