现在我们试试通过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>
注意一下each的key,value
结果如下
ok,就先这样了。