您的位置：首页 > 编程语言 > Java开发

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

2018-03-30 12:02 429 查看
现在我们试试通过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")
c66b
.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，就先这样了。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                ajax
                                                ssm
                                                javaee
                                                idea
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航