Dwr实现自动补全功能

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了Dwr实现自动补全功能，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

books.java

package cn.lichen.entity;

import java.io.Serializable;


import java.util.Date;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class Books implements Serializable{

	private static final long serialVersionUID = 1L;

	private Integer id;
	private String isbn;
	private String title;
	private Double price;
	private Date pubDate;
	private String intro;
	
	@Id
	@GeneratedValue(strategy=GenerationType.IDENTITY)
	public Integer getId() {
		return id;
	}
	public String getIsbn() {
		return isbn;
	}
	public String getTitle() {
		return title;
	}
	public Double getPrice() {
		return price;
	}
	public Date getPubDate() {
		return pubDate;
	}
	public String getIntro() {
		return intro;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public void setIsbn(String isbn) {
		this.isbn = isbn;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public void setPrice(Double price) {
		this.price = price;
	}
	public void setPubDate(Date pubDate) {
		this.pubDate = pubDate;
	}
	public void setIntro(String intro) {
		this.intro = intro;
	}
	
	
	
}


IBooksDao.java

package cn.lichen.dao;
import java.util.List;
import cn.lichen.entity.Books;
public interface IBooksDao {
/** 
* @Title: getAllBooks 
* @Description: 取得所有图书信息
* @param @return 
* @return List<Books> 
* @throws 
*/
public List<Books> getAllBooks();

/** 
* @Title: searchBooksByTitle 
* @Description: 根据首字母，使用dwrAjax实现自动补全图书名称
* @param @param title
* @param @return 
* @return List<Books> 
* @throws 
*/
public List<Books> searchBooksByTitle(String title);

/** 
* @Title: findBooksByTitle 
* @Description: 根据图书名称得到图书信息
* @param @param title
* @param @return 
* @return Books 
* @throws 
*/
public Books findBooksByTitle(String title);
}


IBooksService.java

package cn.lichen.service;

import java.util.List;

public interface IBooksService {

	public List<Books> getAllBooks();
	
	public List<Books> searchBooksByTitle(String title);
	
	public Books findBooksByTitle(String title);
	
}


BooksServiceImpl.java

package cn.lichen.service.impl;

import java.util.List;

@Service("booksService")
public class BooksServiceImpl implements IBooksService {
	private IBooksDao booksDao;

	@Resource(name="booksDao")
	public void setBooksDao(IBooksDao booksDao) {
		this.booksDao = booksDao;
	}
	
	@Override
	public List<Books> getAllBooks() {
		return booksDao.getAllBooks();
	}

	@Override
	public List<Books> searchBooksByTitle(String title) {
		return booksDao.searchBooksByTitle(title);
	}

	@Override
	public Books findBooksByTitle(String title) {
		return booksDao.findBooksByTitle(title);
	}
}


spring_service.xml

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

<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
	xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xsi:schemaLocation="
            http://www.springframework.org/schema/beans  
            http://www.springframework.org/schema/beans/spring-beans-3.1.xsd  
            http://www.springframework.org/schema/aop  
            http://www.springframework.org/schema/aop/spring-aop-3.1.xsd  
            http://www.springframework.org/schema/tx  
            http://www.springframework.org/schema/tx/spring-tx-3.1.xsd  
            http://www.springframework.org/schema/context  
            http://www.springframework.org/schema/context/spring-context-3.1.xsd"
	default-autowire="byName">
	<context:annotation-config />
	<context:component-scan base-package="cn.lichen" />

	<bean id="dataSource" class="org.springframework.jndi.Jndiobjectfactorybean">
		<property name="jndiName">
			<value>java:comp/env/testJndi</value>
		</property>
	</bean>

	<bean id="entityManagerFactory"
		class="org.springframework.orm.jpa.LocalContainerEntityManagerfactorybean">
		<property name="dataSource" ref="dataSource" />
		<property name="packagesToScan" value="cn.lichen" />
		<property name="jpaVendorAdapter">
			<bean class="org.springframework.orm.jpa.vendor.HibernateJpaVendorAdapter">
				<property name="showsql" value="true" />
				<property name="generateDdl" value="true" />
			</bean>
		</property>
		<property name="mappingResources">
			<list>
				<value>cn.lichen.entity.Books</value>
			</list>
		</property>
	</bean>

</beans>


dwr.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">

<dwr>

	<allow>

		<create creator="spring" javascript="booksManage">
			<param name="beanName" value="booksService" />
		</create>

		<convert converter="bean" match="cn.lichen.entity.Books" />
	</allow>

</dwr>


web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	version="3.0">
	<display-name></display-name>
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
	
	<!-- dwr基础 -->
	<servlet>
		<servlet-name>dwr-invoker</servlet-name>
		<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
		<init-param>
			<param-name>debug</param-name>
			<param-value>true</param-value>
		</init-param>
			<init-param>     
            <param-name>crossDomainSessionSecurity</param-name>     
            <param-value>false</param-value>     
    	</init-param>
    	 <init-param>
            <param-name>allowScriptTagRemoting</param-name>
            <param-value>true</param-value>
      </init-param>  
	</servlet>
	<servlet-mapping>
		<servlet-name>dwr-invoker</servlet-name>
		<url-pattern>/dwr/*</url-pattern>
	</servlet-mapping>

<context-param>
    <param-name>webAppRootKey</param-name>
    <param-value>webapp.root</param-value>
  </context-param>
  <filter>
    <filter-name>openSessionInViewFilter</filter-name>
    <filter-class>org.springframework.orm.hibernate4.support.OpenSessionInViewFilter</filter-class>
    <init-param>
      <param-name>singleSession</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter>
    <filter-name>encodingFilter</filter-name>
    <filter-class>
            org.springframework.web.filter.CharacterEncodingFilter
        </filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <filter>
    <filter-name>struts2</filter-name>
    <filter-class>
            org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
        </filter-class>
  </filter>
  <filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <context-param>
    <param-name>log4jConfigLocation</param-name>
    <param-value>classpath:log4j.properties</param-value>
  </context-param>
  <listener>
    <listener-class>
            org.springframework.web.util.Log4jConfigListener
        </listener-class>
  </listener>
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:spring_*.xml</param-value>
  </context-param>
  <listener>
    <listener-class>
            org.springframework.web.context.ContextLoaderListener
        </listener-class>
  </listener>
  <listener>
    <listener-class>
            org.springframework.web.context.request.RequestContextListener
        </listener-class>
  </listener>
  <listener>
    <listener-class>
            org.springframework.web.util.IntrospectorCleanupListener
        </listener-class>
  </listener>
</web-app>


myjavascript.js 
//dwrAjax实现自动补全图书名称功能
function getTitle(evt) {
	evt = evt || window.event;
	if (!$('name').value == "") {
		var i = $("sel").size;
		var j = $("sel").selectedIndex;
		if (event.keyCode == '38') {
			if (j == 0) {
				$("sel").selectedIndex = j;
			} else {
				$("sel").selectedIndex = j - 1;
			}
		} else if (event.keyCode == '40') {
			if (j == (i - 1)) {
				$("sel").selectedIndex = j;
			} else {
				$("sel").selectedIndex = j + 1;
			}
		} else if (event.keyCode == '13') {
			if (j != -1) {
				$("name").value = $("sel").options[j].innerHTML;
				$("dynamicdiv").style.visibility = "hidden";
			}
		} else {
			booksManage.searchBooksByTitle($('name').value,bookstitlecallback);
		}
	} else {
		$("dynamicdiv").style.visibility = "hidden";
	}
}

function bookstitlecallback(list) {
	if (list.length != 0) {
		$("dynamicdiv").style.visibility = "visible";
	} else {
		$("dynamicdiv").style.visibility = "hidden";
	}
	$("sel").size = list.length;
	dwr.util.removeAllOptions("sel");
	dwr.util.addOptions("sel",list,"title","title");
}

function getValue() {
	$("name").value = $("sel").options[$('sel').selectedIndex].innerHTML;
	$("dynamicdiv").style.visibility = "hidden";
}
// dwrAjax得到所有图书信息，用表格显示
function showAllBooks() {
	booksManage.getAllBooks(booksCallBack);
}

var count = 1;

var cellFuncs = [ function(data) {
	return count++;
},function(data) {
	return data.title;
},function(data) {
	return data.isbn;
},function(data) {
	return data.price;
},function(data) {
	return data.pubDate;
},];

function booksCallBack(books) {
	dwr.util.addRows("booksTable",books,cellFuncs);
}

// dwrAjax实现搜索功能

function findBooks() {
	var name = dwr.util.getValue("name");
	booksManage.findBooksByTitle(name,showforsinglebook);
}


function showforsinglebook(data) {
	dwr.util.removeAllRows("booksTable");
	
	dwr.util.setValue("singleBook",data.intro);
}

context.xml

<?xml version="1.0" encoding="UTF-8"?>
<Context>
	<Resource name="testJndi"
               type="javax.sql.DataSource"
		maxActive="100" 
		maxIdle="30" 
		maxWait="10000" 
		username="root" 
		password="bdqn"
		driverClassName="com.MysqL.jdbc.Driver" 
		url="jdbc:MysqL://localhost:3306/t_books"/>
</Context>


index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<style type="text/css">
table {
	width: 70%;
	margin: 150px auto;
	border-top: 1px solid black;
	border-left: 1px solid black;
	text-align: center;
	letter-spacing: 3px;
}

th {
	background-color: #00ff90;
}

th,td {
	border-bottom: 1px solid black;
	border-right: 1px solid black;
}
</style>
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="dwr/interface/booksManage.js"></script>
<script type="text/javascript" src="js/myjavascript.js"></script>
</head>

<body>
	<input type="button" value="I'm comming" onclick="showAllBooks()">
	<br /> 图书搜索：
	<input type="text" id="name" />
	<div id="dynamicdiv"
		style="position: absolute;visibility: hidden;top:37px; left:82px; _left:185; z-index:10; ">
		<select id="sel" multiple="multiple"
			style="background-color: white;width:350px;" ondblclick="getValue()">
		</select>
	</div>
	<input id="search" type="button" onclick="findBooks()" value="搜  索">

	<div id="showBooks"
		style="position: absolute;top:60px; left:82px; _left:100; z-index:1;" />
	<table id="booksTable" cellspacing="0" cellpadding="0">
		<thead>
			<tr>
				<th>编号</th>
				<th>书名</th>
				<th>书号</th>
				<th>价格</th>
				<th>出版时间</th>
			</tr>
		</thead>
	</table>
	<div id="singleBook"></div>
</body>
<script type="text/javascript">
	document.getElementById('name').onkeyup = function(evt) {
		getTitle(evt);
	};
</script>
</html>

实现功能如图：


tomact7与dwr会报错 java.lang.SecurityException: CSRF Security Error

解决办法:

修改 web.xml 中 DWR配置信息

原:

<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.spring.DwrSpringServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>

加入跨域调用配置信息(红色部分)，修改为:

<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.spring.DwrSpringServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param> <param-name>crossDomainSessionSecurity</param-name> <param-value>false</param-value> </init-param> <init-param> <param-name>allowScriptTagRemoting</param-name> <param-value>true</param-value> </init-param> </servlet>

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作