首先由一个bean 这是要加载的数据类型
public class Stock {
private String code;
private String name;
private double price;
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
}
这是servlet 当然也可以用struts2和SpringMVC的action，但是要设置返回的数据时json字符串
public class ActionServlet extends HttpServlet {
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
if(1 == 2){
throw new ServletException("模拟一个系统异常");
}
/*
* 模拟生成几支股票的信息
*/
List<Stock> stocks =
new ArrayList<Stock>();
Random r = new Random();
DecimalFormat df =
new DecimalFormat("#.##");
for(int i=0;i<8;i++){
Stock s = new Stock();
s.setCode("60001" + r.nextInt(10));
s.setName("深发展" + r.nextInt(10));
double price = r.nextDouble() * 100;
s.setPrice(Double.parseDouble(
df.format(price)));
stocks.add(s);
}
JSONArray jsonArr =
JSONArray.fromObject(stocks);
String jsonStr = jsonArr.toString();
System.out.println(jsonStr);
out.println(jsonStr);
}
out.close();
}
}
这是jsp
<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8" %>
<html>
<head>
<style>
#d1{
width:500px;
height:300px;
border:1px solid red;
background-color:black;
margin-left:350px;
margin-top:40px;
}
#d2{
background-color:red;
color:white;
height:40px;
}
table{
color:white;
font-size:24px;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.3.js">
</script>
<script type="text/javascript">
$(function(){
setInterval(f1,5000);
});
function f1(){
$.ajax({
'url':'quoto.do',
'type':'post',
'dataType':'json',
'success':function(data){
//data是服务器返回的数据
$('#tb1').empty();
for(i=0;i<data.length;i++){
var s = data[i];
$('#tb1').append(
'<tr><td>' + s.code
+ '</td><td>' + s.name
+ '</td><td>' + s.price
+ '</td></tr>');
}
},
'error':function(){
$('#tb1').empty();
$('#tb1').append(
"<tr><td colspan='3'>查询不到最新的股票行情</td></tr>");
}
});
}
</script>
</head>
<body style="font-size:30px;font-style:italic;">
<div id="d1">
<div id="d2">股票实时行情</div>
<div>
<table width="100%" cellpadding="0"
cellspacing="0">
<thead>
<tr>
<td>代码</td>
<td>名称</td>
<td>价格</td>
</tr>
</thead>
<tbody id="tb1">
</tbody>
</table>
</div>
</div>
</body>
</html>
相关推荐
在本项目中，我们利用jQuery Masonry插件来实现瀑布流效果，并结合Ajax技术实现动态加载数据，进一步提升用户体验。 jQuery Masonry插件是由David DeSandro开发的一个JavaScript库，它的主要功能是将网页中的元素以...
本文将详细解析使用jQuery和ajax技术来实现动态添加表格行（tr）和单元格（td）功能的方法。 #### 1. 理解jQuery和ajax技术 **jQuery**是一个快速、简洁的JavaScript库，它封装了许多常用的功能，简化了JavaScript...
jquery Ajax实现Select动态添加数据，具体内容如下 1.背景 最近在工作中，遇到了一个关于select的问题。一般情况下，select下拉框中的数据都是固定的或者直接在jsp中读取列表值显示。但是，这次要实现select与别的...
本文将详细介绍使用jQuery AJAX实现三种不同方式的前后台数据传输，以及如何处理界面内容的传值和返回值。 1. **基本的AJAX调用** jQuery提供了`$.ajax()`方法，它是所有其他AJAX功能的基础。例如，我们可以使用...
在网页开发中，jQuery AJAX 是一...总结来说，实现jQuery AJAX动态级联功能需要结合事件监听、AJAX请求和数据处理等多个技术环节。通过这个过程，我们可以创建出更加智能和交互性更强的Web应用，为用户提供更好的体验。
3. **添加数据** - 在前端，jQuery监听表单提交事件，阻止默认的表单提交行为，然后使用$.ajax()发送包含新数据的POST请求到ASP服务器端脚本。 - ASP接收到请求后，通过ADO（ActiveX Data Objects）处理数据库操作...
2. ajax加载数据：涉及通过ajax技术从服务器端动态获取数据，并在网页上实时更新表格内容。 3. 增删改查功能：通常指的是在数据库管理系统中对数据进行增（创建）、删（删除）、改（更新）、查（查询）的基本操作。...
2. **动态添加**：当需要在页面上添加新数据时，可以利用AJAX向服务器发送请求，获取新数据，然后使用jQuery的DOM操作方法（如`append()`）将数据插入到适当位置。 ```javascript // 假设接收到的response是新数据 ...
在现代Web应用开发中，SpringMVC框架与jQuery AJAX的结合使用是常见且高效的数据交互方式。本示例将深入探讨如何在SpringMVC环境中利用jQuery的AJAX功能实现动态、无刷新的数据交换。 首先，SpringMVC是Spring框架...
jQuery中的AJAX请求是一种非常常见的前端异步数据交互方式，它的作用是使得页面无需重新加载即可向服务器请求数据，并将数据动态地加载到页面中。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它...
- 对于文字分页，我们可以看到如何使用jQuery选择器定位分页元素，动态生成和更新页码链接，同时通过AJAX请求获取新的数据。 - 图片分页可能涉及到图片预加载和懒加载技术，确保在用户滚动到相应位置时，图片能够...
本文将深入探讨如何使用jQuery的ajax方法来提交表单，从而实现异步数据交换，提高用户体验。 首先，jQuery的$.ajax()函数是进行Ajax请求的核心，它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单...
在IT行业中，jQuery是一个...总的来说，jQuery的AJAX功能与分页插件相结合，可以有效地实现动态加载和展示TXT文件内容，以及处理大量数据的分页显示。这些技术在网页开发中非常常见，对于提升用户体验具有重要意义。
AJAX（异步JavaScript和XML）则是用于创建动态网页的技术，它允许在不重新加载整个页面的情况下，从服务器获取数据并局部更新页面。 要使用jQuery的AJAX功能，你需要在HTML文件中引入jQuery库。通常通过CDN链接或者...
jQuery AJAX 动态刷新技术是Web开发中的一个重要概念，它使得网页无需重新加载整个页面就能与服务器交换数据并更新部分网页内容。这一特性显著提升了用户体验，因为它减少了等待时间和网络流量。在本文中，我们将...
本篇将详细探讨如何使用 jQuery 的 AJAX 功能来处理 XML（可扩展标记语言）数据。 **1. jQuery 和 AJAX 简介** jQuery 是一个流行的 JavaScript 库，它简化了 DOM 操作、事件处理以及异步请求（如 AJAX）。AJAX ...
在不刷新整个页面的情况下，jQuery AJAX允许动态更新内容，加载图片，甚至执行更复杂的交互操作。 ### jQuery AJAX基础 1. **AJAX** 全称为"Asynchronous JavaScript and XML"，虽然XML在现代Web开发中已不常用，...
标题中的“jQuery实现的纯HTML模板进行ajax数据绑定”指的是使用jQuery库来处理HTML模板，并通过AJAX技术动态地从服务器获取JSON数据，然后将这些数据绑定到模板中，实现页面内容的动态更新，无需刷新整个页面。...
5. **Ajax请求**：在前端，使用jQuery的`$.ajax()`或者更高级的`$.post()`、`$.get()`方法发送Ajax请求，例如添加商品时，将商品信息发送到服务器。 6. **JSP页面**：展示商品列表和详细信息，使用Struts2的标签库...
总的来说，使用jQuery实现数据动态加载分页需要结合前端和后端的知识，通过监听用户滚动事件、发送AJAX请求、处理服务器返回的数据以及适当地更新页面内容，可以创建出一个流畅且高效的分页系统。