发表于： 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
返回列表
评论