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进行遍历,然后赋值。
分享到:
相关推荐
### 使用jQuery与Ajax实现网页无刷新提交功能 在现代Web开发中,为了提供更好的用户体验,很多网站都会采用Ajax技术来实现在不刷新整个页面的情况下进行数据的提交与更新。本篇文章将详细介绍如何利用jQuery库结合...
**jQuery与Ajax无刷新提交表单** 在网页开发中,jQuery和Ajax技术的结合使得用户交互体验得到了极大的提升。"jQuery Ajax无刷新提交表单并执行邮件通知"这个主题涉及了两个关键点:一是利用jQuery进行表单验证,二...
本篇文章将深入探讨AJAX在.NET中的应用以及如何实现无刷新提交数据。 首先,我们需要了解AJAX的基本工作原理。它主要依赖于JavaScript的XMLHttpRequest对象来创建一个与服务器的连接,并在后台发送请求。当服务器...
在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。AJAX的核心是利用JavaScript异步地与服务器进行通信,...
Ajax(Asynchronous JavaScript and XML)技术是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,大大提升了用户体验。在本"ajax无刷新...
在现代Web应用中,"Ajax无刷新上传图片"是一个常见的需求,它允许用户在不刷新整个页面的情况下上传图片,提供更好的用户体验。Ajax(Asynchronous JavaScript and XML)技术结合IFrame可以实现这一功能,使得文件...
当用户在留言板上输入信息并提交时,而不是整个页面刷新,Ajax会发送一个请求到服务器,服务器处理请求并返回新的留言数据,然后JavaScript代码将这些新数据动态地添加到页面的适当位置,从而实现无刷新的效果。...
在Web应用中,用户交互体验是至关重要的,而Ajax(Asynchronous JavaScript and XML)技术则为实现无刷新页面更新提供了可能。Ajax的核心原理是利用JavaScript与服务器进行异步数据交换,使得网页可以在不重新加载...
无刷新技术的关键在于,用户发送消息时,不再是提交整个表单导致页面刷新,而是通过Ajax调用后台的JSP服务,JSP接收到消息后存储到数据库,同时返回一个确认信息。客户端接收到这个确认信息后,再使用Ajax请求获取...
**AJAX无刷新注册登录验证**是Web开发中一种提高用户体验的重要技术,它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这种技术在2005年被广泛引入,虽然现在可能不是最前沿的技术,但...
- **表单验证**:在提交前验证用户输入,无需刷新页面。 - **实时聊天**:用户发送消息后,无需刷新就能看到新消息。 - **无限滚动**:网页加载更多内容时,只加载可视区域的新数据。 - **地图应用**:拖动地图...
而Ajax(Asynchronous JavaScript and XML)则是一种在不重新加载整个网页的情况下,更新部分网页内容的技术。Ajax的核心是通过JavaScript与XMLHttpRequest对象进行异步数据交换,从而实现页面的局部刷新。 将ASP与...
Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这在登录验证场景中尤为重要,因为它可以避免每次提交表单时页面...
2. AJAX:AJAX是一种在无需重新加载整个网页的情况下更新部分网页的技术。通过JavaScript创建XMLHttpRequest对象,向服务器发送异步请求,获取数据后在客户端进行处理,实现页面的局部刷新。 二、ASP AJAX无刷新...
通过创建或使用XMLHttpRequest对象,Ajax可以向服务器发送异步请求,获取新数据,然后使用JavaScript动态更新页面的部分内容,无需刷新整个页面。这极大地提高了用户体验,减少了网络带宽消耗。 2. 分页: 在处理...
无刷新提交基于Ajax(Asynchronous JavaScript and XML)技术,它利用JavaScript异步地向服务器发送请求,并在后台处理数据,然后只更新页面中需要改变的部分。这大大提升了用户体验,因为用户可以继续在其他部分...
在ASP AJAX无刷新留言板中,AJAX可能被用来在用户提交留言后,后台处理数据并返回结果,然后使用JavaScript更新留言列表,这一切都在后台悄无声息地完成。 JQuery库则为这个系统提供了更简洁的JavaScript编程接口。...
5. **DOM操作**:接收到服务器响应后,Ajax会通过JavaScript操作DOM,动态更新页面中的特定部分,实现局部刷新。 下面是一个简单的Ajax请求示例: ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', ...
而AJAX(Asynchronous JavaScript and XML)技术通过JavaScript异步地与服务器通信,仅更新页面的特定部分,而不是整个页面,实现了"无刷新"的效果。 这个"JAJX+ASP无刷新留言本"可能包含以下核心知识点: 1. **...