jsp页面中利用AJAX查询数据库_sql

ajax的原生态方法即可，

var xmlHttpRequest

//判断不同浏览器，采用不同方式创建XMLHttpRequest对象

function createXmlHttpRequest(){

if(window.ActiveXObject){

return new ActiveXObject("Microsoft.XMLHTTP")//windows浏览器

}else if(window.XMLHttpRequest){

return new XMLHttpRequest()//其他浏览器

}

// 发送请求到服务器，判断用户名是否存在

// 请求字符串

var url = "user.do?method=doCheckUserExists&userName="+uname

//1. 创建XMLHttpRequest组件

xmlHttpRequest = createXmlHttpRequest()

// 2. 设置回调函数

xmlHttpRequest.onreadystatechange = haoLeJiaoWo

// 3. 初始化XMLHttpRequest组件

xmlHttpRequest.open("GET",url,true)

// 4. 发送请求

xmlHttpRequest.send(null)

}

function haoLeJiaoWo(){

if(xmlHttpRequest.readyState == 4){

if(xmlHttpRequest.status == 200){

var b = xmlHttpRequest.responseText

alert("服务器端返回信息：" + b)

//b 是个字符串，后台传过来的，

//.... 你想要的 *** 作在这里写动态刷新jsp页面

}

</script>

jsp中用ajax获取数据的例子如下：

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>

<TITLE>留学生系统</TITLE>

var XMLHttpReq = false

//ajax接口

function createXMLHttpRequest(){

if(window.XMLHttpRequest){

XMLHttpReq = new XMLHttpRequest()

}else if(window.ActiveXObject){

try{

XMLHttpReq = new ActiveXObject("MSXML2.XMLHTTP")

}catch(e){

try{

XMLHttpReq = new ActiveXObject("Mircsoft.XMLHTTP")

}catch(e1){}

}

function sendRequest(url){

createXMLHttpRequest()

XMLHttpReq.open("GET",url,true)

XMLHttpReq.onreadystatechange = processResponse

XMLHttpReq.send(null)

}

function processResponse(){

if(XMLHttpReq.readyState == 4){

if(XMLHttpReq.status == 200){

var res = XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data

window.alert(res)

document.myform.userid.value=""

document.myform.pwd.value=""

}else{

window.alert("你请求的页面有异常1")

}

function userCheck(){

var userid = document.myform.userid.value

var pwd = document.myform.pwd.value

if(userid == ""){

window.alert("用户名不能为空")

document.myform.pwd.value=""

document.myform.userid.focus()

return false

}else{

sendRequest("login?userid="+userid)

}

function pwdCheck(){

var pwd = document.myform.pwd.value

var pwd2 = document.myform.pwd2.value

if(pwd!=pwd2){

window.alert("密码不一致")

document.myform.pwd.value=""

document.myform.pwd2.value=""

document.myform.pwd.focus()

return false

}

</SCRIPT>

</HEAD>

<body>

<tr>

</object>

</div></td>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></td>

</tr>

</table>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="radio" name="sex" value="0" checked="checked">男

<input type="radio" name="sex" value="1">女

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

struts2 action 代码import java.io.IOException

import java.io.PrintWriterpublic class AutoComplete extends CommonAction { /**

* 用于实践ajax google 的样式

* 用于接收服务器端请求的

//抓取从页面穿过来的字符串用于和服务器端的单词进行匹配

private String word

public AutoComplete() {

} public String onblurquery() throws Exception{

//保存要查询的东西

//注意ajax 中这个所谓的视图层不返回页面只返回数据

this.getRequestMap().put("word", word)

//System.out.println("struts - >"+word)

this.getResponse().setContentType("text/xmlcharset=gb2312")

return "toshow"

}

public String getWord() {

return word

} public void setWord(String word) {

this.word = word

}}jsp 代码<%@ page contentType="text/htmlcharset=gb2312"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>google</title>

/*当文本没有被选中的时候就使用这个样式*/

.auto-1{

background-color: #FFCC99

color: gray

cursor: pointer

width: 100%

}

/*当文本被选中的时候就是用这个样式*/

.auto-2{

background-color: #CCFF99

color: green

cursor: pointer

width: 100%

}

</style>

</head>

<body>

google:

</body>

</html>jquery 代码 //表示当前被选中的节点

var highlightindex = -1

var timeoutId

$(document).ready(function (){

//alert("准备好了")

//保存文本输入框

var wordinput=$("#word")

//保存文本的

var wordinputOffset = wordinput.offset()

//d出框应该等于在文本的下面那么就是文本的宽等于div的宽

$("#auto").hide().css("border","1px solid #CDD2CB").css("position","absolute")

.css("top",wordinputOffset.top+wordinput.height()+5+"px").css("left",wordinputOffset.left+"px").width(wordinput.width()+40+"px")

//给文本框添加键盘按下并谈起的实践

$("#word").keyup(function (event){

//处理键盘实践

var myEvent = event || window.event

//如果输入的是字母应该是将文本中最新的信息发送到服务器

//如果是退格或是删除键那么就将文本中最新的信息发送给服务器

var keyCode = myEvent.keyCode

if(keyCode >= 65 &&keyCode <= 90 || keyCode == 8 || keyCode == 46){

//1 得到文本框中的内容

var wordtext = $("#word").val()

if(wordtext!=""){

//2 把这的信息网服务器中发送

window.clearTimeout(timeoutId)

//对发送到服务器进行交互延迟500毫秒比秒打字太快了没有抓取到

timeoutId = window.setTimeout(function (){

//第一个参数请求的地址第二个参数传递的参数第三个参数回调函数第四个参数数据回传的数据类型

$.post("auto_onblurquery.aiyu",{word:wordtext},function(data){

// 将dom对象data 转化成JQuery 对象昂

//alert(data)

var jqueryObj = $(data)

//alert(data)

// 到xml 中找到所有的woerd节点

var wordNode = jqueryObj.find("word")

//alert(wordNode)

var autoNode = $("#auto")

autoNode.html("")

// 遍历所有恶woed 节点取出单词

wordNode.each(function (i){

//获取单词的内容

var wordN = $(this)

// 新建div节点将单词放进去

//alert(wordN.text())

//将div节点加入到d出框汇总

var newdivNode = $("<div>").attr("id",i)

newdivNode.addClass("auto-1").html(wordN.text()).appendTo(autoNode)

//给鼠标加入进入的时候就高亮

newdivNode.mouseover(function (){

if(highlightindex!=-1){

$("#auto").children("div").eq(highlightindex).removeClass("auto-2").addClass("auto-1")

}

highlightindex = $(this).attr("id")

$(this).removeClass("auto-1").addClass("auto-2")

})

//鼠标移出的加上的样式

newdivNode.mouseout(function (){

$(this).removeClass("auto-2").addClass("auto-1")

})

//鼠标点击的时候增加的样式

newdivNode.click(function (){

//取出文本的内容

var comtext = $(this).text()

$("#auto").hide()

//隐藏的时候就把节点重新的赋值

highlightindex = -1

$("#word").val(comtext)

})

if(wordNode.length>0){

if($("#word").val()==""){

$("#auto").hide()

//隐藏的时候就把节点重新的赋值

highlightindex = -1

}else{

$("#auto").show()

}

}else{

$("#auto").hide()

//隐藏的时候就把节点重新的赋值

highlightindex = -1

}

//alert(data)

},"xml")

},500)

}else{

$("#auto").hide()

//隐藏的时候就把节点重新的赋值

highlightindex = -1

}

}else if(keyCode == 38 || keyCode == 40){

//如果是按得向上或是向下键

if(keyCode == 38){

//上

var autoNodes = $("#auto").children("div")

if(highlightindex!=-1){

autoNodes.eq(highlightindex).removeClass("auto-2").addClass("auto-1")

highlightindex--

}else{

highlightindex = autoNodes.length-1

}

if(highlightindex==-1){

//如果修改过后的索引为-1 则索引到最后的节点

highlightindex = autoNodes.length-1

}

autoNodes.eq(highlightindex).removeClass("auto-1").addClass("auto-2")

}

if(keyCode == 40){

//下

var autoNodes = $("#auto").children("div")

if(highlightindex!=-1){

autoNodes.eq(highlightindex).removeClass("auto-2").addClass("auto-1")

}

highlightindex++

if(highlightindex>=autoNodes.length){

highlightindex=0

}

if(highlightindex==-1){

//如果修改过后的索引为-1 则索引到最后的节点

highlightindex = 0

}

autoNodes.eq(highlightindex).removeClass("auto-1").addClass("auto-2")

}

}else if(keyCode == 13){

//按下的回车

//下拉框中被选中有选中的东西

if(highlightindex!=-1){

//取出文本的内容

var comtext = $("#auto").children("div").eq(highlightindex).text()

$("#auto").hide()

//隐藏的时候就把节点重新的赋值

highlightindex = -1

$("#word").val(comtext)

}else{

//下拉框中没有选中的东西

alert("文本框的["+$("#word").val()+"]被提交了")

$("#auto").hide()

$("#word").blur()

}

})

$("input[id='chk']").click(function (){

alert("文本框的["+$("#word").val()+"]被提交了")

})

})最后返回xml 的代码<%@ page contentType="text/xmlcharset=gb2312"%>

<%@ taglib prefix="s" uri="/struts-tags"%>

<words>

<s:if test="%{'absolute'.startsWith(#request.word)}">

<word>absolute</word>

</s:if>

<s:if test="%{'anyone'.startsWith(#request.word)}">

<word>anyone</word>

</s:if>

<s:if test="%{'anything'.startsWith(#request.word)}">

<word>anything</word>

</s:if>

<s:if test="%{'apple'.startsWith(#request.word)}">

<word>apple</word>

</s:if>

<s:if test="%{'break'.startsWith(#request.word)}">

<word>break</word>

</s:if>

<s:if test="%{'boolean'.startsWith(#request.word)}">

<word>boolean</word>

</s:if>

<s:if test="%{'breach'.startsWith(#request.word)}">

<word>breach</word>

</s:if>

</words>

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/sjk/6700826.html

jsp页面中利用AJAX查询数据库

发表评论

评论列表（0条）