JS引用JAVA查询数据怎么实现

毫無疑問 ajax 用servlet查詢數據庫把返回值輸出用回調函數傳回頁面然後js控制更新頁面的值

用AJAX，前端发送请求--》后台获取数据库数据返回到前台--》回调函数处理（JS操作页面组件）

谢谢楼上各位，受教了！在学习使用AJAX的过程中，js控制更新頁面怎么无效啊？
   我是根据1L给的教程改的代码。搞不清是哪个页面出的错误。求指教~~
前台页面
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
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 'tst.jsp' starting page</title>
     <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<%
response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>

<script type="text/javascript">
var xmlHttp=null;
function showCustomer(str)
{
if (str.length==0)
  {
  document.getElementById("cllx").innerHTML="";
  return;
  }
try
  {// Firefox, Opera 8.0+, Safari, IE7
  alert("2");
  xmlHttp=new XMLHttpRequest();
  }
catch(e)
  {// Old IE
  try
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  catch(e)
    {
    alert ("Your browser does not support XMLHTTP!");
    return;
    }
  }
;
var url="search.jsp?q=" + str;
url=url+"&sid="+Math.random();
xmlHttp.open("GET",url,true);
;
xmlHttp.send(null);
document.getElementById("cllx").innerHTML=xmlHttp.responseText;
</script>  </head>

  <body>
  <input type="text" id="hphm" onkeypress="if (event.keyCode==13) {showCustomer(this.value)}" />
  <input type="text" id="cllx"/>
  </body>
</html>

后台页面<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%@ page import="java.sql.*" %>
<%@ page import="java.io.*" %>
<%@ page import="java.util.*" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%
  java.sql.Connection lConn = null;
  java.sql.Statement lStat = null;
  java.sql.ResultSet lRs = null;
  try
  {
DriverManager.registerDriver(new oracle.jdbc.driver.OracleDriver());
String lUrl = "java:oracle:thin:@localhost:1521:orcl";
//java:oracle:thin: 表示使用的是thin驱动
//@srv:1521: 表示使用的服务器的名字和端口号
//dbname: 表示数据库的SID
  lConn = DriverManager.getConnection(lUrl,"system","8887938");
  lStat = lConn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
String sql="select * from vehicle  where hphm = "+ "'" +request.getParameter("q") + "'";
  //查询结果
lRs = lStat.executeQuery(sql);
lRs.first();
response.getWriter().write(lRs.getString("cllx"));
lRs.close();
  lStat.close();
  } catch (SQLException e) {
  throw new ServletException(e);
  } finally {
  try {
  if (lConn != null)
  lConn.close();
  } catch (SQLException e) {
  }
  }
%>

运行前台页面后，ID为cllx的INPUT没有返回值，我设个参数单独运行后台页面，有结果啊。
卡在这里了，头晕。请大大们指出哪里错了。

xmlHttp.onreadystatechange=function()
  {
  if(xmlHttp.readyState==4)
    {
    document.myForm.time.value=xmlHttp.responseText;
    }
  }

啊 ~~~又有新东西天哪~~！
为搞这么点东西，看了好多原来没接触的资料。JSP、JavaScript、jQuery、CSS
还有SSH框架，发现JAVA WEB开发真不简单。一下子太多知识消化不了啊。
现在就是想把这个简单功能实现，高级的慢慢来吧我想问就上面页面不能回调的问题
是哪错了？

......
var url="search.jsp?q=" + str;
url=url+"&sid="+Math.random();
xmlHttp.open("GET",url,true);xmlHttp.send(null);
xmlHttp.onreadystatechange=function()
  {
  if(xmlHttp.readyState==4)
    {
    document.getElementById("cllx").innerHTML=xmlHttp.responseText;
    }
  }

根据楼上的代码改动，JS中
document.getElementById("cllx").innerHTML=xmlHttp.responseText;
没反应啊。我开始以为是search.jsp的问题自己模拟了一个运行
http://localhost:8088/webprint/search.jsp?q=C97796&sid=0.84643487
response有返回值啊，那xmlHttp.responseText怎么就接收不到呢？都快要疯了

无语啊。
var url = "search.jsp?q=" + str;
url=url + "&sid=" + new Date().getTime();
xmlHttp.open("GET", url, true);xmlHttp.onreadystatechange = function(){
  if(xmlHttp.readyState == 4 && xmlHttp.status = 200)
    {
    document.getElementById("cllx").innerHTML = xmlHttp.responseText;
    }
  }xmlHttp.send(null);1.句柄都没有设置好，就急着send了。
2。回调函数的条件不对，httpstatus=200必须加上
3.在回调方法里面加个alert，看看他有没有进来。对于初学者来说这种方法要注意的地方太多了
要么对整段代码用try catch
try {} catch(e) {
    alert(e.message);
}
这样好知道错在哪里。

考。
document.getElementById("cllx").innerHTML=xmlHttp.responseText;
改成
document.getElementById("cllx").value=xmlHttp.responseText;

如果不懂ajax就用如下方法解决吧:
写一jsp页面(如1.jsp)，包含一个有很多input type="text"的表单，再写一个servlet接收表单数据并查询oracle数据库，将查询结果用request.setAttribute(String str,Object arg)保存到request里面
然后用request.getRequestDispatcher("1.jsp").forward(request,response)跳转到原来的jsp页面
注意:
1.jsp中的input标签写成如下形式：<input type="text" name="某某" value="${str}">
其中value中的str为request.setAttribute(String str,Object arg)中的第一个参数。
servlet在web.xml中的配置上google查一下就知道了.

最后发现问题是出在JS上面唉~~~  路漫漫其修远兮
JS最后正确的代码function showCustomer(str)
{
alert(str);
var xmlHttp=null;
try
  {// Firefox, Opera 8.0+, Safari, IE7

  xmlHttp=new XMLHttpRequest();
  }
catch(e)
  {// Old IE
  try
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  catch(e)
    {
    alert ("Your browser does not support XMLHTTP!");
    return;
    }
  }
var url="search.jsp?q=" + str;
url=url+"&sid="+Math.random();
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
var responseText=xmlHttp.responseText;
document.getElementById("cllx").value=responseText;


}

调试易

JS引用JAVA查询数据怎么实现

解决方案 »