1 ajax部分刷新提交 做页面提交的时候 想使日历控件不刷新 但是其他刷新,这样显示出某天的内容。
2 以前是整个form表单提交,致使日历控件刷新 显示当天日期 而不是选中的日期。选定某个日期,会执行跳转。要达到部分刷新,就需要使用ajax。
思路:执行跳转后,不是整个form表单提交,而是整个页面不刷新,然后在后台中返回json数据 ,这里json可能疯转的是一个bean或者是一个list,返回到前端后,在ajax中返回数据中 取得这些值,然后赋值给相应的id。
注意:1 在ajax的返回数据是json格式,因此提交的时候应该用
$.getJSON(url,function(data)){}
这里应该有三个参数,但是一般只用到两个,url:跳转路径,function(data)回调函数,data:返回值---这里是封转的json格式。
2 在返回成功后要给jsp中相关的id重新赋值,不能用$("#content").val()
这是一个函数,汇报错误说是不能给函数值赋值,可以用document.getElementById('content').value取代。
另外这里返回的json数据 是在后台进行封装的 有专门的类 JSONObject,JSONArray
如果封转的是一个bean的话 new 一个JSONObject即可 这样在js中返回函数中 直接拿值 而不需要遍历。
后台封转函数根据实际需要:
/**
* JSON数据封装--无刷新输出
* @param infos
* @return
*/
private JSONObject noFlushPrint(HealthLogs healthLogs) {
JSONObject member = null;
member = new JSONObject();
try {
if( healthLogs.getContent() == null){
member.put("content","");
}else{
member.put("content", healthLogs.getContent());
}
member.put("userId", healthLogs.getUserId());
member.put("smoke_num", Integer.valueOf(healthLogs.getSmoke_num()));
member.put("sleep_hour", Integer.valueOf(healthLogs.getSleep_hour()));
member.put("mood", Integer.valueOf(healthLogs.getMood()));
member.put("waistline", Integer.valueOf(healthLogs.getWaistline()));
member.put("weight", Integer.valueOf(healthLogs.getWeight()));
member.put("press", Integer.valueOf(healthLogs.getPress()));
} catch (Exception e) {
e.printStackTrace();
}
return member;
}
这样返回到js中 直接取值赋值给相关数据
如果封装的是一个list的话 new一个JSONObject 和 JSONArray 在js中返回函数中,需要进行遍历,
private JSONObject generateChartData(List<Sugar> infos) {
JSONObject json = new JSONObject();
JSONArray array = new JSONArray();
JSONObject member = null;
for (int i = 0; i < infos.size(); ++i) {
Sugar info = (Sugar) infos.get(i);
member = new JSONObject();
SimpleDateFormat dateformat = new SimpleDateFormat("yyyy-MM-dd");
member.put("date", dateformat.format(info.getTest_date()));
member.put("bloodsugar", Float.valueOf(info.getBlood_suger()));
array.add(member);
}
json.put("jsonArray", array);
return json;
}
这样返回到前台后,需要对此JSON进行遍历,然后赋值。