实时数据显示
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在这个过程中起...
Ajax实现的自动补全功能提高了用户的交互体验，它利用了JavaScript和Java的结合，实现实时的数据交换。在这个例子中，用户在`word.jsp`页面输入时，Java后端根据输入提供匹配的词汇，然后通过Ajax技术将这些词汇动态...
本实例将探讨如何将这两者整合，通过AJAX技术实现一个仿Google Suggest的自动补全功能，该功能通常用于输入框中，为用户提供动态搜索建议。我们将详细解析这个实例中的各个组成部分。 首先，`index.jsp`是用户界面...
在这个场景下，"ajax文本框自动补全功能"是一个常见且实用的设计，它极大地提升了用户体验，尤其是在输入搜索关键词或者填写表单时。这种功能类似于百度搜索引擎的自动索引功能，用户在输入框中输入文字时，系统会...
总结来说，"传智播客Jquery实例(防google自动补全)"的课程涵盖了利用jQuery禁用浏览器的自动补全功能以及jQuery AJAX的基本使用，这些都是前端开发中非常实用的技术，对于提升用户体验和实现与服务器的无缝交互至关...
在搜索框的自动补全功能中，Ajax起到了关键作用，它负责在用户输入时向服务器发送请求，获取匹配的数据，然后动态填充到搜索框下方的建议列表。 接下来，我们将详细讲解如何实现这个功能： 1. **HTML结构**：创建...
在提供的"Ajax自动补全效果实例"压缩包中，可能包含了以下文件： 1. HTML文件：包含页面结构和JavaScript代码，用于监听输入事件、发送Ajax请求和处理响应。 2. CSS文件：定义自动补全列表的样式，使其美观且易于...
这个"AJAX自动补全实例"很可能是用于创建一个动态的搜索或输入建议功能，用户在输入文本时，系统会实时从服务器获取匹配的建议结果，提升用户体验。 在ASP（Active Server Pages）环境中实现AJAX自动补全，我们需要...
在本文中，我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能，以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见，它能够提高用户输入的效率和用户体验。 首先，让...
在本篇博客“AJAX学习总结（九）---Jquery实例：仿googlesuggest自动补全功能”中，作者分享了如何使用jQuery实现一个类似Google Suggest的自动补全功能，这是一种常见的前端交互设计，广泛应用于搜索框输入时提供...
综上所述，"邮箱自动补全demo"是一个展示如何在网页中实现邮箱自动补全功能的实例，它结合了前端的JavaScript、CSS和HTML技术，以及可能涉及的后端服务支持。通过学习和理解这个示例，开发者可以更好地掌握这一功能...
总之，"搜索记录和自动补全分开提示demo"是一个综合了搜索历史、实时输入建议的交互设计实例，它的实现涉及到前端技术、后端接口、用户输入监听以及优化用户体验的策略。在实际开发中，理解并运用这些知识点能显著...
总结来说，"autoComplete 文字自动补全demo1"是一个利用jQuery插件实现的自动补全功能实例，它展示了如何在前端应用中创建高效、可定制的自动补全输入体验。通过对相关文件的学习，开发者可以深入理解这一功能的实现...
而Ajax自动补全功能通常被用于输入框，在用户输入过程中动态获取并显示匹配项，提高用户体验。 ### 二、解析XML配置文件dwr.xml 该配置文件定义了一个名为`JUserChecker`的远程对象，并指定了其对应的Java类`...
综上所述，Ajax内容自动补全是一种利用Ajax技术实现的交互优化手段，它使得用户在输入过程中能够实时获取建议，提升输入体验。了解并掌握这一技术，对于前端开发者来说是提升产品用户体验的重要技能。
在文件名称列表中，我们看到"AjaxAutocompleteTable"，这可能是指使用Ajax技术实现的自动补全表格。Ajax（异步JavaScript和XML）技术允许页面的部分内容在不刷新整个页面的情况下更新，这样用户在进行自动补全操作时...
综上所述，这个项目实例展示了如何利用SSH框架处理后端业务逻辑，通过jQuery AJAX实现前后端的实时通信，从而实现搜索自动补全功能，提供类似于百度搜索的用户体验。这对于提升Web应用的互动性和用户满意度具有重要...
**Ajax自动补全技术详解** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在网页应用中，Ajax自动补全功能常常用于输入框中，用户输入文本时，系统根据...
1. **初始化设置**：创建一个函数或对象，用于设置自动补全的参数，如数据源、提示框样式、触发自动补全的事件等。 2. **事件监听**：监听用户在文本框中的输入，通常使用`keyup`或`input`事件，当用户输入时触发...