ajax使用之动态显示商品信息
来源:互联网 发布:星辰0灯尤格萨隆数据 编辑:程序博客网 时间:2024/06/15 23:52
上一篇说到了利用ajax技术实现无刷新验证用户名,这篇将介绍无刷新获取后台商品信息并显示出来。实现的效果如下:
前台的操作逻辑和前面介绍的都差不多。都是获取XMLHttpRequest对象并进行请求监听等等。获取XMLHttpRequest对象封装在了util.js里面了。
util.js里代码如下:
/** * 得到XMLHttpRequest对象 */function getXHR(){var xmlHttp;try {xmlHttp=new XMLHttpRequest();}catch(e){try{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}catch(e){alert("你的浏览器不支持ajax");return false;}}}return xmlHttp;}前台页面代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">.odd{background-color:#c3f3c3;}.even{background-color:#f3c3f3;}</style><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="${pageContext.request.contextPath}/util.js"></script><title>ajax用户名验证</title><script>window.onload = function() {document.getElementById("bt1").onclick = function() {//发出已补请求//1/得到xhr对象var xhr = getXHR();//2.注册状态变化监听器xhr.onreadystatechange = function() {if (xhr.readyState == 4) {if (xhr.status == 200) {document.getElementById("div1").innerHTML = xhr.responseText;}}}//3.建立与服务器的连接xhr.open("POST", "AjaxDemo2" + "?time=" + new Date().getTime());xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//4.向服务器发出请求xhr.send();}}</script></head><body><button id="bt1">获取商品信息</button><div id="div1"></div></body></html>后台servlet代码如下:
package com.levi.servletajax;import java.io.IOException;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.levi.domain.Product;/** * Servlet implementation class AjaxDemo2 */public class AjaxDemo2 extends HttpServlet {private static final long serialVersionUID = 1L;private List<Product>products=new ArrayList<Product>(); /** * @see HttpServlet#HttpServlet() */ public AjaxDemo2() { super(); // TODO Auto-generated constructor stub }/** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}@Overridepublic void init() throws ServletException{products.add(new Product(1, "篮球", 300));products.add(new Product(2, "足球", 100));products.add(new Product(3, "乒乓球",50));products.add(new Product(4, "羽毛球",100));products.add(new Product(5, "排球", 120));}/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setAttribute("products", products);request.getRequestDispatcher("/listProducts.jsp").forward(request, response);}}其中这里通过服务器转发到了listProducts.jsp这里,这里进行的是显示所有商品的代码。因为返回的是jsp文件,也就是相当于把所有的代码返回了。返回到前面前台页面的的div里面,达到了动态显示的效果。
listProducts.jsp中代码如下
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><table border="1" width="438"><tr><th>编号</th><th>名称</th><th>单价</th></tr><c:forEach items="${products }" var="p" varStatus="vs"><tr class="${vs.index%2==0?'odd':'even'}"><th>${p.id }</th><th>${p.name }</th><th>${p.price }</th></tr></c:forEach></table></body></html>其中这里稍微难理解的就是前台xhr.responseText获取到的文本数据其实就是那整个jsp文件。
0 0
- ajax使用之动态显示商品信息
- 使用Ajax动态的显示时间
- ajax动态显示日期
- JSP综合项目实战 实现商品的动态显示,查看商品信息,保留浏览记录
- 做动态搜索实时显示(ajax)时,乱跑之故障
- cakephp中使用ajax获得数据,动态折线显示
- 商品信息
- Ajax实现动态显示字数
- ajax动态显示当前时间
- 一个页面实现修改删除列表显示,ajax动态生成table(使用ajax,springmvc,jsp)
- 显示上次浏览过的商品信息
- Fragment之动态显示
- 使用ajax技术无刷新动态调用股票信息(追加分时图显示)
- JS使用ajax从xml文件动态获取数据显示的方法
- 前台使用ajax动态获取数据并且显示在页面上,SSM框架二级联动
- 使用TreeView控件实现多级商品信息浏览
- 使用python + selenium爬取淘宝商品信息
- asp.net ajax动态显示时间
- app 上架到AppStore被拒绝的各种原因
- self 和 _
- Codeforces Round #357 (Div. 2) D. Gifts by the List
- cocos2d-x 3.x学习之TintAction
- Android笔记之开发中处理异常并写入本地log文件
- ajax使用之动态显示商品信息
- response常见应用、response细节、输出随机图片、定时刷新网页
- 怎样查看交叉编译器的版本?
- JNIEnv解析
- iOS开发技巧--禁止系统头文件被不小心修改
- Spring --- java定时器,Spring定时器和Quartz定时器
- 获得路径
- windows下eclipse搭建android_ndk开发环境
- 图像滤波算法之guide filter导向滤波