jsp中，用ajax获取数据
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jsp中，用ajax获取数据相关的知识，希望对你有一定的参考价值。
我想利用ajax在jsp页面中获取从数据库中的数据，比如用户名，我在servlet里面写了一个查询语句，比如得到用户名为‘张三’（String 类型），我如何将这个张三传到jsp页面，利用js设置 document.getElementById("textfield").Value='参数（张三）'，关键是不知道怎么从servlet中传出去。
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>
<META http-equiv=Content-Type content="text/html; charset=GBK">
<SCRIPT language=javascript type=text/JavaScript>
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>
<LINK href="css/css.css" type=text/css rel=stylesheet>
</HEAD>
<body>
<table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" >
<tr>
<td ><img src="images/logo.jpg" ></td>
<td background="images/banner.jpg"><div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" >
<param name="movie" value="images/2.swf">
<param name="quality" value="high">
<embed src="images/2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" ></embed>
<param name="wmode" value="transparent">
</object>
</div></td>
<td ><table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td class="style1"><div align="center">设为首页</div></td>
</tr>
<tr>
<td class="style1"><div align="center">收藏本站</div></td>
</tr>
<tr>
<td class="style1"><div align="center">联系我们</div></td>
</tr>
</table></td>
</tr>
</table>
<form method="post" action="control.jsp?action=register" name="myform">
<table border="0" align="center" bgcolor="#F0F0F0">
<tr>
<td align="center">用户名</td>
<td><input name="userid" type="text" size="20" onblur="userCheck()"></td>
</tr>
<tr>
<td align="center">真实姓名</td>
<td><input name="username" type="text" size="20"/></td>
</tr>
<tr>
<td align="center">性别</td>
<td>
<input type="radio" name="sex" value="0" checked="checked">男
<input type="radio" name="sex" value="1">女
</td>
</tr>
<tr>
<td align="center">密码</td>
<td><input name="pwd" type="password" size="20"/></td>
</tr>
<tr>
<td align="center">密码确认</td>
<td><input name="pwd2" type="password" size="20" onblur="pwdCheck()"/></td>
</tr>
<tr>
<td align="center">电子邮箱</td>
<td><input name="email" type="text" size="20"/></td>
</tr>
<tr>
<td align="center">学校</td>
<td><input name="school" type="text" size="20"/></td>
</tr>
<tr>
<td align="center">电话号码</td>
<td><input name="phonenum" type="text" size="20"/></td>
</tr>
<tr>
<td align="center"><img border=0 src="image.jsp"></td>
<td><input type=text name=in maxlength=4 size="8"></td>
</tr>
<tr>
<td align="center"><input type="submit" value="确定" /></td>
</tr>
</table>
</form>
</body>
</html> 参考技术A PrintWriter out = response.getWriter();
out.println("zhangsan");;
页面不是有接收文本的方法么就直接可以获取了啊追问
这个方法貌似是直接打印到页面上了，我关键是用ajax,也就是说我查询出结果之后，ajax就可以获取到结果，将结果显示在文本框中。
追答if(xmlHttp.readyState==4)
if(xmlHttp.status==200)
var str = xmlHttp.responseText;
alert(str);
else
alert("失败")
response.setHeader("ContentType", "text/json");
response.setCharacterEncoding("utf-8");
response.getWriter().write(张三);
ajax中的msg就是你传过来的值！追问
谢谢，我用其他方法解决了，谢谢
本回答被提问者采纳 参考技术C 直接用jsp就可以了，干嘛用servlet呢！ajax可以直接用jsp的！追问servlet是进行数据库查询，我已经解决了，还是谢谢你。
用ajax发送参数
【中文标题】用ajax发送参数【英文标题】：sending parameters with ajax 【发布时间】：2011-02-23 04:28:33 【问题描述】：我正在尝试使用 ajax 将从我的 jsp 中的表中获取的参数发送到其他 JSP。 我正在使用 followinf 函数将所有值发送到 JSP：ajaxForm 但我不知道为什么每次运行时发送失败：
这里是javascript函数：
function editarow()
var xhr = getXhr();
xhr.onreadystatechange = function()
if (xhr.readyState == 4 && xhr.status == 200)
selects = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('prjsel').innerHTML = selects;
;
var row, firstNameCell, lastNameCell;
var table = document.getElementById("sheet");
var buttons = table.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++)
if (buttons[i].name == "edit")
buttons[i].onclick = function()
row = this.parentNode.parentNode;
// The first name cell is the first child
NameCell1 = findElement(row.firstChild);
NameCell2 = findElement(NameCell1.nextSibling);
NameCell3 = findElement(NameCell2.nextSibling);
NameCell4 = findElement(NameCell3.nextSibling);
NameCell5 = findElement(NameCell4.nextSibling);
NameCell6 = findElement(NameCell5.nextSibling);
NameCell7 = findElement(NameCell6.nextSibling);
// `innerHTML` pour obtenir la valeur
/*alert("name 1 is " + NameCell1.innerHTML);
alert("name 2 is " + NameCell2.innerHTML);
alert("name 3 is " + NameCell3.innerHTML);
alert("name 4 is " + NameCell4.innerHTML);
alert("name 5 is " + NameCell5.innerHTML);
alert("name 6 is " + NameCell6.innerHTML);
alert("name 7 is " + NameCell7.innerHTML);*/
xhr.open("POST", "ajaxForm.jsp", true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send("NameCell1="+NameCell1,"NameCell2="+NameCell2,"NameCell3="+NameCell3,"NameCell4="+NameCell4,"NameCell5="+NameCell5,"NameCell6="+NameCell6,"NameCell7="+NameCell7 );
从表中获取值后，我想将它们全部发送到ajaxForm.jsp。
【问题讨论】：
【参考方案1】：从最后一行开始：
xhr.send("NameCell1="+NameCell1,"NameCell2="+NameCell2,"NameCell3="+NameCell3,"NameCell4="+NameCell4,"NameCell5="+NameCell5,"NameCell6="+NameCell6,"NameCell7="+NameCell7 );
这不是在 JavaScript 中连接字符串的方法。
由于您使用的是 JSP，因此您也应该了解 Java。您应该像在 Java 中那样在 JavaScript 中连接字符串：
xhr.send("NameCell1=" + NameCell1 + ",NameCell2=" + NameCell2 + "etc...");
也就是说，这应该在 JavaScript 控制台中出错。你有注意这个吗？无论如何，为了更好的 JavaScript 调试，我建议你使用Firebug，为了减少冗长/不透明和更多兼容跨浏览器的 Ajax 处理和 HTML DOM 遍历，我强烈建议你看看jQuery。使用 jQuery 和 Ajax Form Plugin，您只需以下几行即可：
$(document).ready(function()
$('#formId').ajaxForm(function(response)
$('#prjsel').html(response);
);
);
这样您就不必担心浏览器的具体细节以及如何正确发送请求。
【讨论】：
【参考方案2】：send 方法只接受一个参数。您无法转换数据，因此它是 application/x-www-form-urlencoded 字符串。
即一组键和值（其中键和值都使用 encodeURIComponent 处理，并用 & 分隔。
【讨论】：
以上是关于jsp中，用ajax获取数据的主要内容，如果未能解决你的问题，请参考以下文章