发表于: 2018-03-02 20:29:51

1 768


今天完成的事情

1.完成JSON的简单学习

controller

@Controller
@RequestMapping("")
public class StudentSJsonController {

@Autowired
   StudentSService studentSService;
@ResponseBody
   @RequestMapping("/submitStudentS")
public String submitStudentS(@RequestBody StudentS studentS){
System.out.println("SSM接受到浏览器提交的json,并转换为StudentS对象:"+studentS);
return "OK";
}
@ResponseBody
   @RequestMapping("/getOneStudentS")
public String getOneStudentS(){
StudentS c =studentSService.get(2);
c.getId();
c.getName();
c.getAge();
JSONObject json = new JSONObject();
json.put("studentS",JSONObject.toJSON(c));
return json.toJSONString();
}
@ResponseBody
   @RequestMapping("/getManyStudentS")
public String getManyStudentS(){
List<StudentS> cs = new ArrayList<StudentS>();
for (int i=0;i <10; i++){
StudentS c=studentSService.get(i);
cs.add(c);

}
return JSONObject.toJSON(cs).toString();
}


}

getmany

<!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="getManyStudentS";
$.post(
url,
function(data) {
console.log(data);
var studentSs = $.parseJSON(data);
console.log(studentSs.length);

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

</body>
</html>

getone

<!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="getOneStudentS";
$.post(
url,
function(data) {
var json=JSON.parse(data);
var name =json.studentS.name;
var id = json.studentS.id;
$("#messageDiv").html("分类id:"+ id + "<br>分类名称:" +name );

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

</body>
</html>

submit

<!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="studentS 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 studentS={"name":name,"id":id};
var jsonData = JSON.stringify(studentS);
var page="submitStudentS";

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

});
</script>
</body>

</body>
</html>

运行结果

2.总结任务二,明天提交

明天计划的事情

提交任务二,开始任务三

遇到的问题

收获

学习了JSON


返回列表 返回列表
评论

    分享到