document.getElementById()出错

时间:2012-02-16 05:11:13

标签: javascript jsp getelementbyid scriptlet

我正在尝试编写一个jdo查询,其中我必须根据用户在jsp上选择的类别获取一组值...我的查询看起来像这样

Query query2 = pm.newQuery("select from " + ProductDB.class.getName()+ "where pCategory = " document.getElementById("cname").text);

现在在我的jsp页面上,我有一个动态下拉框,在标签中我给了id标签为“cname”。所以当我执行上面的查询时,我希望它能得到用户选择的类别。

但是我收到了这个错误:

Syntax error on token "document", delete this token

我的选择标记如下所示:

<select name = "cname" id="cname">
.
.
.
</select>

我在这里缺少什么?

更新

我正在为下面的jsp文件添加我的整个代码:

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ page import="java.util.*"%>
<%@ page import="javax.jdo.Query"%>
<%@ page import="javax.jdo.PersistenceManager"%>
<%@ page import="com.google.appengine.api.users.User"%>
<%@ page import="com.google.appengine.api.datastore.Key"%>
<%@ page import="com.google.appengine.api.users.UserService"%>
<%@ page import="com.google.appengine.api.users.UserServiceFactory"%>
<%@ page import="java.net.*"%>
<%@ page import="javax.servlet.http.HttpServletRequest"%>
<%@ page import="com.nerdy.needs.*"%>
<html>
<head>
<title>Product Inventory</title>
<META HTTP-EQUIV="Refresh" CONTENT="450">
<link rel="stylesheet" href="login.css" type="text/css" />
</head>
<h1 align="center">Product Inventory</h1>
<body>
<form>
<table>
    <tr>
        <td>View</td>
        <td><select name="cname" id="cname">
            <option value="all">All</option>
            <%
                PersistenceManager pm = PMF.get().getPersistenceManager();
                Query query = pm.newQuery("select cname from "
                        + CategoryDB.class.getName());
                List<String> categories = new ArrayList<String>();
                categories = (List<String>) query.execute();
                String[] c = categories.toArray(new String[categories.size()]);
                for (int i = 0; i < c.length; i++) {
                    String s = c[i];
            %>
            <option value="<%=s%>"><%=s%></option>
            <%
                }
            %>
        </select></td>
        <td>Products</td>
    </tr>
</table>
</form>
<%
    if (document.getElementById("cname").value == "all") {
        PersistenceManager pm1 = PMF.get().getPersistenceManager();
        Query query1 = pm1.newQuery("select * from "
                + ProductDB.class.getName());
        List<ProductDB> prods1 = (List<ProductDB>) query1.execute();
        if (prods1.isEmpty()) {
%>
<table class="items">
    <tr>
        <th class="main">Image</th>
        <th class="main">Category</th>
        <th class="main">Name</th>
        <th class="main">Price</th>
        <th class="main">Description</th>
    </tr>
    <tr class="lightBlue">
        <td class="actions" colspan=100%>
        <p>No items were found.</p>
        </td>
    </tr>
</table>
<%
    } else {
%>
<table class="topics">
    <tr>
        <th class="main">Image</th>
        <th class="main">Category</th>
        <th class="main">Name</th>
        <th class="main">Price</th>
        <th class="main">Description</th>
    </tr>
    <%
        for (ProductDB p : prods1) {
    %>
    <tr>
        <td>
        <p><b> <img width="100" height="100"
            src="http://localhost:8888/serve?id= <%=p.getProductImage()%>">
        </b></p>
        </td>
        <td>
        <p><b><%=p.getProductCategory()%></b></p>
        </td>
        <td>
        <p><b><%=p.getProductName()%></b></p>
        </td>
        <td>
        <p><b><%=p.getProductPrice()%></b></p>
        </td>
        <td>
        <p><b><%=p.getProductDescription()%></b></p>
        </td>
    </tr>
    <%
        }
    %>
</table>
<%
    pm1.close();
        }
    } else {
        PersistenceManager pm2 = PMF.get().getPersistenceManager();
        Query query2 = pm.newQuery("select * from "
                + ProductDB.class.getName() + "where pCategory = "
                + document.getElementById("cname").value);
        List<ProductDB> prods2 = (List<ProductDB>) query2.execute();
        if (prods2.isEmpty()) {
%>
<table class="items">
    <tr>
        <th class="main">Image</th>
        <th class="main">Category</th>
        <th class="main">Name</th>
        <th class="main">Price</th>
        <th class="main">Description</th>
    </tr>
    <tr class="lightBlue">
        <td class="actions" colspan=100%>
        <p>No items were found.</p>
        </td>
    </tr>
</table>
<%
    } else {
%>
<table class="topics">
    <tr>
        <th class="main">Image</th>
        <th class="main">Category</th>
        <th class="main">Name</th>
        <th class="main">Price</th>
        <th class="main">Description</th>
    </tr>
    <%
        for (ProductDB p : prods2) {
    %>
    <tr>
        <td>
        <p><b> <img width="100" height="100"
            src="http://localhost:8888/serve?id= %=p.getProductImage()%>">
        </b></p>
        </td>
        <td>
        <p><b><%=p.getProductCategory()%></b></p>
        </td>
        <td>
        <p><b><%=p.getProductName()%></b></p>
        </td>
        <td>
        <p><b><%=p.getProductPrice()%></b></p>
        </td>
        <td>
        <p><b><%=p.getProductDescription()%></b></p>
        </td>
    </tr>
    <%
        }
    %>
</table>
<%
    pm2.close();
        }
    }
%>
</body>
</html>

我在两个地方得到“文件无法解决”错误 - 一个在if语句

if(document.getElementById("cname").value=="all")

和另一个在查询语句

Query query2 = pm.newQuery("select * from " + ProductDB.class.getName()+ "where pCategory = " + document.getElementById("cname").value);

任何人都可以帮我弄清楚出了什么问题吗?

3 个答案:

答案 0 :(得分:1)

您的具体问题是您正在将Java / JSP与JavaScript混合使用。您似乎期望它们同步运行,并且您似乎期望JavaScript的document对象变量也存在于JSP scriptlet 代码中。

这是错误的。 Java / JSP是一个HTML代码生成器。它在HTTP请求时在Web服务器中运行,并生成HTML / JS代码并将其作为HTTP响应发送回webbrowser。所有webbrowser检索的都是纯HTML / JS代码。在webbrowser中右键单击该页面并执行查看源以自行查看。

您的具体功能要求似乎是您需要获取

的提交值
<select name="cname">

在Java / JSP方面。

您需要HttpServletRequest#getParameter()将其作为请求参数。所以,替换

<%
    if (document.getElementById("cname").value == "all") {
        // ...
    }
%>

通过

<%
    if ("all".equals(request.getParameter("cname"))) {
        // ...
    }
%>

也就是说,在JSP文件中编写Java代码是poor practice。也是如此。请注意,此问题与JDO 无关

答案 1 :(得分:0)

您忘记了document.getElementById之前的加号。

正确的代码是

Query query2 = pm.newQuery("select from " + ProductDB.class.getName() + "where pCategory = " + document.getElementById("cname").text);

此外,虽然这将修复语法错误,但代码仍然无效。根据{{​​3}},<select/>元素没有text属性;您应该将valueselectedIndexoptions结合使用。

答案 2 :(得分:0)

尝试这种方式: -

var i = document.getElementById("cname").selectedIndex;

document.getElementById("cname").options[i].text;

OR

document.getElementById("cname").value

UPDATE:

列名也不见了。它应该是*specific column names

Query query2 = pm.newQuery("select * from " + ProductDB.class.getName()+ "where pCategory = " + document.getElementById("cname").value); 

根据您的错误更新

您的代码应如下所示: -

if(document.getElementById("cname").value=="all") 
{ 
 <%
 PersistenceManager pm1 = PMF.get().getPersistenceManager(); 
 Query query1 = pm1.newQuery("select * from " + ProductDB.class.getName()); 
 List<ProductDB> prods1 = (List<ProductDB>) query1.execute(); 
%>
}

应在标签&lt;%%&gt; 之间声明JSP标记,其他html标记应在标记之外。

根据您的代码:

问题是在document.getElementById("cname").value内部调用JSP标记。那是错的。

您可以将 cname 值作为查询字符串传递,并通过参数获取值 要么 将document.getElementById("cname").value值分配给JSP变量并进行处理。