实时数据显示
var obj;
var sid;
$(document).ready(function(){
var stocknode = $("#stock").css("border","1px solid black").width("100px")
.css("position","absolute").css("z-index","99").css("background-color","yellow");
stocknode.hide();
var as = $("a");
as.mouseover(function (event){
//找到当前股票代码
var aNode=$(this);
var divNode=aNode.parent();
sid = divNode.attr("id");
//找到对应股票的对象
updatediv();
/*
var offset = aNode.offset();
stocknode.css("left",offset.left+"px").css("top",offset.top+aNode.height()+"px");
*/
var myEvent = event || window.event;
stocknode.css("left",myEvent.clientX+5+"px").css("top",myEvent.clientY+5+"px");
stocknode.show();
});
as.mouseout(function (){
stocknode.hide();
});
getInfo();
setInterval(getInfo,1000);
});
function getInfo(){
$.get("/AjaxTrain/servlet/GetInfo?timestampt=" + new Date().getTime(),null,function(data){
obj = eval(data);
var s1 = obj["300001"];
var s2 = obj["000001"];//obj.300001
/*
遍历一个js对象
for(var stockid in obj){
var stock = obj[stockid];
}
*/
var ss = s1.now;
span1 = $("#300001").children("span");
span1.html(s1.now);
if(s1.now>s1.yesterday){
span1.css("color","red");
}else{
span1.css("color","green");
}
span2 = $("#000001").children("span")
span2.html(s2.now);
if(s2.now>s2.yesterday){
span2.css("color","red");
}else{
span2.css("color","green");
}
updatediv();
})
}
function updatediv(){
var stockobj = obj[sid];
for(var proname in stockobj){
if(proname!="name"){
$("#"+proname).children("span").html(stockobj[proname]);
}
}
}
package com.cn;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class GetInfo extends HttpServlet {
@Override
public void init() throws ServletException {
stocks = new HashMap<String,Stock>();
Stock a1 = new Stock(3000.0,2990.1,"上证指数","300001");
Stock a2 = new Stock(23.22,23.50,"浦发银行","000001");
stocks.put(a1.getId(), a1);
stocks.put(a2.getId(), a2);
System.out.println(stocks);
}
private HashMap<String,Stock> stocks;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
double sz = Math.random() * 20;
double pf = Math.random() * 0.5;
boolean flagsz = ((int)(Math.random()*10))%2==0;
boolean flagpf = ((int)(Math.random()*10))%2==0;
Stock s1 = stocks.get("300001");
Stock s2 = stocks.get("000001");
double temp;
if(flagsz){
temp = s1.getNow() + sz;
}else{
temp = s1.getNow() - sz;
}
temp = (int)(temp*100)/100.0;
s1.setNow(temp);
if(flagpf){
temp = s2.getNow() + pf;
}else{
temp = s2.getNow() - pf;
}
temp= (int)(temp*100)/100.0;
s2.setNow(temp);
response.setContentType("text/html;charset=GBK");
PrintWriter out = response.getWriter();
//out.println(s1+"<br>"+s2);
/**
* 封装成JSON数据格式
*
* 以对象方式:
* ({
* name1:{
* name:"ssss",id:"dddd",yesterday:123,today:343,now:321
* },
* name2:{
* name:"ssss",id:"dddd",yesterday:123,today:343,now:321
* }
* })
*
* 以数组方式:
* [{},{}]其中{}表示一个对象 中间用逗号分隔
* [{
* name:"s1.getName()",
* id:"s1.getId()",
* yesterday:s1.getYesterday(),
* today:s1.getToday(),
* now:s1.getNow()},
* {
* name:"s2.getName()",
* id:"s2.getId()",
* yesterday:s2.getYesterday(),
* today:s2.getToday(),
* now:s2.getNow()
* }]
*/
//采用数组方式回传两只股票数据
StringBuilder sb = new StringBuilder();
// sb.append("[{name:\"").append(s1.getName()).append("\",id:\"").append(s1.getId()).append("\",yesterday:")
// .append(s1.getYesterday()).append(",today:").append(s1.getToday()).append(",now:").append(s1.getNow())
// .append("},{name:\"").append(s2.getName()).append("\",id:\"").append(s2.getId()).append("\",yesterday:")
// .append(s2.getYesterday()).append(",today:").append(s2.getToday()).append(",now:").append(s2.getNow())
// .append("}]");
//采用对象方式回传两只股票数据
sb.append("({")
.append("\"").append(s1.getId()).append("\"").append(":{name:\"").append(s1.getName()).append("\"").append(",id:\"").append(s1.getId())
.append("\",yesterday:").append(s1.getYesterday()).append(",today:").append(s1.getToday()).append(",now:").append(s1.getNow())
.append("},")
.append("\"").append(s2.getId()).append("\"").append(":{name:\"").append(s2.getName()).append("\"").append(",id:\"").append(s2.getId())
.append("\",yesterday:").append(s2.getYesterday()).append(",today:").append(s2.getToday()).append(",now:").append(s2.getNow())
.append("}")
.append("})");
System.out.println(sb.toString());
out.println(sb);
out.flush();
out.close();
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
package com.cn;
public class Stock {
@Override
public String toString() {
return this.name+":"+this.now;
}
private String id;
private String name;
private double now;
private double yesterday;
private double today;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public double getNow() {
return now;
}
public void setNow(double now) {
this.now = now;
}
public double getToday() {
return today;
}
public void setToday(double today) {
this.today = today;
}
public double getYesterday() {
return yesterday;
}
public void setYesterday(double yesterday) {
this.yesterday = yesterday;
}
public Stock( double yesterday, double today,String name,String id ) {
super();
this.id = id;
this.name = name;
this.yesterday = yesterday;
this.today = today;
this.now = today;
}
}
自动补全
var highlightindex = -1;
$(document).ready(function(){
var setTimeoutId;
var autoNodes = $("#AutoComplete");
var wordInput = $("#word");
var wordOffset = wordInput.offset();
//alert(wordOffset.top+"------"+wordOffset.left);
autoNodes.hide().css("border","1px black solid").css("position","absolute")
.css("z-index",99).css("top",wordOffset.top+wordInput.height()+2+"px")
.css("left",wordOffset.left-2+"px").width(wordInput.width()+5);
wordInput.keyup(function(event){
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
if(keyCode>=65 && keyCode<=90 || keyCode==8 || keyCode==46 ){
var wordText = wordInput.val();
if(wordText!=""){
clearTimeout(setTimeoutId);
setTimeoutId = setTimeout(function(){
$.post("/AjaxTrain/AutoComplet?timestampt=" + new Date().getTime(),{word:wordText},function(data){
var jqueryobj = $(data);
var wordNodes = jqueryobj.find("word");
autoNodes.html("");
wordNodes.each(function (i){
var wordNode = $(this);
var newDivNode = $("<div>").attr("id",i);
newDivNode.html(wordNode.text()).appendTo(autoNodes);
newDivNode.mouseover(function (){
if(highlightindex!=-1){
autoNodes.children("div").eq(highlightindex)
.css("background-color","white");
}
highlightindex = $(this).attr("id");
$(this).css("background-color","red");
});
newDivNode.mouseout(function (){
if(highlightindex!=-1){
autoNodes.children("div").eq(highlightindex)
.css("background-color","white");
}
highlightindex = $(this).attr("id");
$(this).css("background-color","red");
});
//增加鼠标点击事件
newDivNode.click(function (){
var completeText = $(this).text();
autoNodes.hide();
highlightindex = -1;
wordInput.val(completeText);
});
});
if(wordNodes.length>0){
autoNodes.show();
}else{
autoNodes.hide();
highlightindex = -1;
}
},"xml");
},500);
}else{
autoNodes.hide();
highlightindex = -1;
}
//按向上向下键
}else if(keyCode==38 || keyCode==40){
if(keyCode == 38){
var autoNode = autoNodes.children("div");
if(highlightindex!=-1){
autoNode.eq(highlightindex).css("background-color","white");
highlightindex--;
}else{
highlightindex = autoNode.length - 1;
}
if(highlightindex==-1){
highlightindex = autoNode.length - 1;
}
autoNode.eq(highlightindex).css("background-color","red");
}
if(keyCode == 40){
var autoNode = autoNodes.children("div");
if(highlightindex!=-1){
autoNode.eq(highlightindex).css("background-color","white");
}
highlightindex++;
if(highlightindex==autoNode.length){
highlightindex = 0;
}
autoNode.eq(highlightindex).css("background-color","red");
}
}else if(keyCode==13){ //回车
if(highlightindex!=-1){//当提示信息中有高亮的信息时
var completeText = autoNodes.hide().children("div").eq(highlightindex).text();
highlightindex = -1;
wordInput.val(completeText);
}else{//没有高亮的单词时
alert("--------"+wordInput.val()+"-------");
autoNodes.hide();
wordInput.get(0).blur();//让文本框失去焦点
}
}
});
$("input[type='button']").click(function (){
alert("--------"+wordInput.val()+"-------");
});
})
<%@ page language="java" contentType="text/xml;charset=UTF-8"%>
<%
String word = (String)request.getAttribute("word");
%>
<words>
<%if("apple".startsWith(word)){%>
<word>apple</word>
<%}%>
<%if("abslutole".startsWith(word)){%>
<word>abslutole</word>
<%}%>
<%if("attrbute".startsWith(word)){%>
<word>attrbute</word>
<%}%>
<%if("artery".startsWith(word)){%>
<word>artery</word>
<%}%>
<%if("automatic".startsWith(word)){%>
<word>automatic</word>
<%}%>
<%if("ascocarp".startsWith(word)){%>
<word>ascocarp</word>
<%}%>
<%if("asclepius".startsWith(word)){%>
<word>asclepius</word>
<%}%>
<%if("ascites".startsWith(word)){%>
<word>ascites</word>
<%}%>
<%if("barberry".startsWith(word)){%>
<word>barberry</word>
<%}%>
<%if("barbotine".startsWith(word)){%>
<word>barbotine</word>
<%}%>
<%if("bisodol".startsWith(word)){%>
<word>bisodol</word>
<%}%>
<%if("bulkhead".startsWith(word)){%>
<word>bulkhead</word>
<%}%>
</words>
package com.cn;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AutoComplet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
String word = request.getParameter("word");
request.setAttribute("word", word);
request.getRequestDispatcher("wordxml.jsp").forward(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
}
分享到：
相关推荐
利用Ajax实现类似百度的自动补全功能，代码详细，代码正确。
本项目是利用DWR框架实现Ajax无刷新，自动补全功能！
jQuery+Ajax搜索框输入文字自动补全代码,一款利用Ajax实现的仿百度搜索自动补全下拉框显示相关列表选项效果。
java与jQuery整合ajax仿googleSuggest自动补全实例，以返回的json格式的数据对象
Ajax实现自动补全，案例详细。
ajax文本框自动补全功能，类似百度自动索引功能。
Ajax实现自动补全和搜索功能，含有使用到的所有工具，以及实现的步骤文档和详细的代码说明
Ajax配合JavaScript写实现自动补全功能的TextBox
AJAX jquery 模仿谷歌搜索自动补全功能，非常经典的例子。欢迎大家来下载学习。
使用ajax实现自动补全功能，并进行数据库连接操作
Java+Ajax实现简单自动补全。运行时访问地址：http://127.0.0.1:8080/ajaxcomTion/word.jsp
jquery 文本框 自动补全 ajax autocomplete 完整实例
ASP自动补全实例 如需要的话 欢迎下载
一款简单使用的jQuery文本框联想补全自动完成插件，可定义索引关键词，可设置输入框的宽高，支持搜索回调函数的jQuery搜索框输入关键词自动联想补全代码
java ajax实现自动补全功能,代码完整，经过调试运行不会出错，有需要的朋友下载
asp.net + ajax + sqlserver 自动补全功能
本案例实现如google效果可以自动补全，本案例适合初学ajax代码者，代码简单，安全性考虑稍欠，望下载的朋友，自行考虑实现
ajax jquery技术 GoogleSuggest 自动补全 源代码
ajax(DWR框架)实现简单的内容自动补全
本示例为jquery自动补全的示例，其中包括两部分，第一是在本地构造的json格式的数据供自动补全用，第二是从后台将数据处理成json格式，jquery通过ajax请求后台的json数据，其中还有处理autocomplete不支持中文的方法...