AjAx-Jquery总结(30-40)

来源：互联网发布：真·假面骑士知乎编辑：程序博客网时间：2024/05/22 00:42

var inputdom = input.get(0);

inputdom.select();

//6.需要清除td上的点击事件

td.unbind("click");

}

完成后台模拟股票涨跌的功能

Stock.Java

/**

* Created by IntelliJ IDEA.

* User: ming

* Date: 2008-6-14

* Time: 9:29:13

* To change this template use File | Settings | File Templates.

* 用于保存股票的基本信息

public class Stock {

/**

* 昨天的收盘价

private double yesterday;

/**

* 今天的开盘价

private double today;

/**

* 当前价

private double now;

/**

* 股票名称

private String name;

/**

* 股票代码

private String id;

public Stock(double yesterday, double today, String name, String id) {

this.yesterday = yesterday;

this.today = today;

this.name = name;

this.id = id;

this.now = today;

}

public double getYesterday() {

return yesterday;

}

public void setYesterday(double yesterday) {

this.yesterday = yesterday;

}

public double getToday() {

return today;

}

public void setToday(double today) {

this.today = today;

}

public double getNow() {

return now;

}

public void setNow(double now) {

this.now = now;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getId() {

return id;

}

public void setId(String id) {

this.id = id;

}

public String toString() {

return this.name + ":" + this.now;

}

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.ServletException;

import javax.servlet.ServletConfig;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.HashMap;

/**

* Created by IntelliJ IDEA.

* User: ming

* Date: 2008-6-14

* Time: 9:35:50

* To change this template use File | Settings | File Templates.

* 返回股票当前信息的servlet

public class GetStocksInfo extends HttpServlet {

//保存股票对象的map

private HashMap<String,Stock> stocks;

protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {

//返回两只股票的价格信息

//1。计算随机数

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;

//2。将随机数和股票的当前价格进行加或减的操作，得到新的当前价格

Stock szzs = stocks.get("300001");

Stock pfyh = stocks.get("000001");

double temp;

if (flagsz) {

temp = szzs.getNow() + sz;

} else {

temp = szzs.getNow() - sz;

}

//需要对新的当前价格进行截取，只保留小数点后两位

temp = (int)(temp * 100) / 100.0;

szzs.setNow(temp);

if (flagpf) {

temp = pfyh.getNow() + pf;

} else {

temp = pfyh.getNow() - pf;

}

temp = (int)(temp * 100) / 100.0;

pfyh.setNow(temp);

httpServletResponse.setContentType("text/html;charset=gb2312");

PrintWriter out = httpServletResponse.getWriter();

//out.println(szzs + "<br />" + pfyh);

//3。返回两只股票的昨天收盘，今天开盘和当前价格

//采用json的数据格式返回股票的信息

StringBuilder builder = new StringBuilder();

//采用数组的方式回传两个股票对象

builder.append("[{name:/"").append(szzs.getName()).append("/",id:/"").append(szzs.getId())

.append("/",yes:").append(szzs.getYesterday()).append(",tod:").append(szzs.getToday())

.append(",now:").append(szzs.getNow())

.append("},")

.append("{name:/"").append(pfyh.getName()).append("/",id:/"").append(pfyh.getId())

.append("/",yes:").append(pfyh.getYesterday()).append(",tod:").append(pfyh.getToday())

.append(",now:").append(pfyh.getNow())

.append("}]");

//采用对象的方式回传两个股票对象

//如果回传表示对象的json，需要在最外层加上一个括号，否则页面解析会出错

builder.append("({")

.append("/"").append(szzs.getId()).append("/":{name:/"").append(szzs.getName())

.append("/",yes:").append(szzs.getYesterday()).append(",tod:").append(szzs.getToday())

.append(",now:").append(szzs.getNow())

.append("},")

.append("/"").append(pfyh.getId()).append("/":{name:/"").append(pfyh.getName())

.append("/",yes:").append(pfyh.getYesterday()).append(",tod:").append(pfyh.getToday())

.append(",now:").append(pfyh.getNow())

.append("}})");

out.println(builder);

}

protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {

doGet(httpServletRequest, httpServletResponse);

}

public void init(ServletConfig servletConfig) throws ServletException {

stocks = new HashMap<String,Stock>();

//创建股票

Stock szzs = new Stock(3000.0,2990.1,"上证指数","300001");

Stock pfyh = new Stock(23.22, 23.50,"浦发银行","000001");

//将两只股票保存在stocks的map中

stocks.put(szzs.getId(),szzs);

stocks.put(pfyh.getId(),pfyh);

System.out.println(stocks);

}

web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

version="2.5">

<servlet-name>GetStockInfo</servlet-name>

<servlet-class>GetStocksInfo</servlet-class>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>GetStockInfo</servlet-name>

<url-pattern>/GetStockInfo</url-pattern>

</servlet-mapping>

</web-app>

//Javascript数组的表示[{},{}]大括号表示对象

//测试运行的javascript是否是正确的，在dbug里面有运行的机制调试。

//Eval（调试代码）；

//或 var test = [{},{}];

//Alert(test);

JQueryStock.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>itcast.cn的JQuery实例：动态股票信息</title>

</head>

<body>

</div>

</body>

</html>

jquerystock.js

//期望进入页面后就可以开始从服务器段获取数据，然后显示股票价格

//保存服务器段返回的股票对象

var obj;

var sid;

$(document).ready(function() {

//页面载入时隐藏弹出框

var stockNode = $("#stock").css("border","1px solid black").width("150px")

.css("position","absolute").css("z-index","99").css("background-color","blue")

.css("color","yellow");

stockNode.hide();

var as = $("a");

//定义鼠标进入股票名称时的操作

as.mouseover(function(event){

//获取到当前股票的代码

var aNode = $(this);

var divNode = aNode.parent();

sid = divNode.attr("id");

//找到对应的股票对象

updatediv();

//需要控制弹出框的位置

//1.找到当前连接的位置

var offset = aNode.offset();

//2。设置弹出框的位置

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();

//3。每隔一秒钟和服务器交互一次，用户不用刷新页面就可以不断地看到最新的股票信息

setInterval(getInfo,1000);

});

//从服务器段获取数据并显示在页面上的的方法

function getInfo() {

//1。向服务器发起请求，获取数据

$.get("GetStockInfo", null, function(data) {

//2.接收并解析数据

obj = eval(data);

//2.1获取两只股票的当前指数信息

var szzs = obj["300001"]; //obj.300001它不是变量的名称，变量名称有字母开头

var pfyh = obj["000001"];

遍历一个js的对象

for (var stockid in obj) {

var stock = obj[stockid];

}

//2.2找到页面中对应的节点，然后填充最新的股票价格

var span3 = $("#300001").children("span");

span3.html(szzs.now);

if (szzs.now > szzs.yes) {

//当前价格大于昨天收盘，则显示红色

span3.css("color","red");

} else {

span3.css("color","green");

}

var span1 = $("#000001").children("span");

span1.html(pfyh.now);

if (pfyh.now > pfyh.yes) {

//当前价格大于昨天收盘，则显示红色

span1.css("color","red");

} else {

span1.css("color","green");

}

updatediv();

},”json”) //json可选，可不写，写了之后可以把obj = eval(data);改成obj = data;

}

//更新弹出框中得内容

function updatediv() {

var stockobj = obj[sid];

for (var proname in stockobj) {

if (proname != "name") {

//找到对应的弹出框中的div节点，然后找到span字节点，将数据填充//用点不正确

$("#" + proname).children("span").html(stockobj[proname]);

}

自动补全实例

AutoComplete.java

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.ServletException;

import java.io.IOException;

/**

* Created by IntelliJ IDEA.

* User: ming

* Date: 2008-6-14

* Time: 14:17:00

* To change this template use File | Settings | File Templates.

* 接收用户端请求

public class AutoComplete extends HttpServlet{

protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {

//表示页面传过来的字符串，用于和服务器段的单词进行完整匹配

String word = httpServletRequest.getParameter("word");

//将字符串保存在request对象中

httpServletRequest.setAttribute("word",word);

//将请求转发给视图层（注意AJAX中，这个所谓的视图层不返回页面，只返回数据，所以也可以称作使一个数据层）

httpServletRequest.getRequestDispatcher("wordxml.jsp").

forward(httpServletRequest, httpServletResponse);

}

protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {

doGet(httpServletRequest, httpServletResponse); //To change body of overridden methods use File | Settings | File Templates.

}

Wordxml.jsp

<%--

itcast.cn的ajax自动补全实例

--%>

<%@ page contentType="text/xml;charset=UTF-8" language="java" %>

//页面传送的字符串

String word = (String)request.getAttribute(“word”);

<words>

<%if (“absolte”.startsWith(word)){%>

<word>absolute</word>

<%}%>

<%if (“absolte”.startsWith(word)){%>

<word>anyone</word>

<%if (“absolte”.startsWith(word)){%>