[SoOnPerson] SSM框架的搭建（3）

本文链接：https://blog.csdn.net/qq_35793301/article/details/79754544

现在我们试试通过ajax向后台发送请求，然后返回json数据。

1.引入一个json的包，我下的是阿里巴巴的，我也没用过，试试吧

maven

  <!-- JSON -->
  <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
  <dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.41</version>
  </dependency>
</dependencies>

在helloController里加这段代码。（应该在第一个文章里有，从头看能看懂的）

@RequestMapping(value = "/ajax.do")
@ResponseBody
public String getJson(){
    Map<String,String> map = new HashMap<String, String>();
    map.put("name","SoOnPerson");
    map.put("sex","男");
    String jsonString = JSON.toJSONString(map);
    System.out.println(jsonString);
    return jsonString;
}

引入jq包,去下一个吧

然后引入一下

hello.jsp

<%--
  User: SoOnPerson
  Date: 2018/3/4
  Time: 22:03
  Description:
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <script src="../../js/jquery.js"></script>
</head>
<body>
    this is hello.jsp
    <button id="getJson">点击一下获取json</button>
</body>
<script type="text/javascript">
    $(function () {
        $("#getJson").click(function () {
            alert("点击了按钮");
            $.ajax({
                url:"/ajax.do",
                success:function (data) {
                    alert(data.toString());
                }
            });
        });
    })
</script>
</html>

我们运行试一次

好像还不错，有返回值

但是有中文是问号，我们先试试把他弄进页面中显示一下看看

<%--
  User: SoOnPerson
  Date: 2018/3/4
  Time: 22:03
  Description:
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="../../js/jquery.js"></script>
</head>
<body>
    this is hello.jsp
    <button id="getJson">点击一下获取json</button>
    <p id="showJson"></p>
</body>
<script type="text/javascript" charset="UTF-8">
    $(function () {
        $("#getJson").click(function () {
            alert("点击了按钮");
            $.ajax({
                url:"/ajax.do",
                success:function (data) {
                    alert(data.toString());
                    $("#showJson").text(data.toString());
                }
            });
        });
 })
</script>
</html>

出现的还是问号，必须解决一下了！

在控制台中，我们看到的是正常的

在网页中的控制台中获取的就是错误的。

有可能是json在传递的时候有问题吧，所以百度了一下Json传字符串中文问题解决方案，感谢

结果正确了

那么，如果我们想要解析一下这个字符串呢

刚刚的方法是通过ajax获得json字符串了，但是实际应该是要返回json

在ajax里面加了一个属性：dataType:"json"

<%--
  User: SoOnPerson
  Date: 2018/3/4
  Time: 22:03
  Description:
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="../../js/jquery.js"></script>
</head>
<body>
    this is hello.jsp
    <button id="getJson">点击一下获取json</button>
    <p id="showJson"></p>
    <div id="info">

    </div>
</body>
<script type="text/javascript" charset="UTF-8">
    $(function () {
        $("#getJson").click(function () {
            alert("点击了按钮");
            $.ajax({
                url:"/ajax.do",
                dataType:"json",
                success:function (data) {
                    alert("获取的结果是这个："+data.toString());
                    //解析数组
                    $.each(data, function(key, value) {

                        $("#info").append(
                            "<div>" + key+":"+value + "</div>"
                        )

                    });
                }
            });
        });
    })
</script>
</html>