图书商城_day3遇到的难点

打开首页的时候，需要看到分类的菜单栏

我的首页是"index.jsp"，所以当搜索框中输入的是localhost:8080/jsps/index.jsp的时候，就会来到首页，这时候就可以看到了左边的分类菜单栏。

但是，我们进入到index.jsp界面之前，需要将所有分类catagory从数据库中查询出来之后，然后将数据保存到request域中，再转发到index.jsp界面，才可以。但是我觉得这样就会导致可能相对麻烦，所以我希望可以通过ajax来实现我的这个目的，一旦搜索框中输入了"localhost:8080/jsps/index.jsp"之后，就会来到对应的界面，同时在这个界面加载完毕之后，就会请求数据库获取所有的分类。

然后我们获取到所有的数据之后，利用json进行返回。
思路很简单，但是获取数据之后，我该如何将数据添加到左侧的菜单栏中呢？这时候就需要利用appendChild方法来添加子标签了。但是如果是直接添加<a>标签的话，就会导致超链接没有办法换行，就是在这个地方纠结了很久，最后才想起了列表<li>这个标签，所以最后就采用了列表这个标签。

所以对应的ajax.jsp代码如下:

<script type="text/javascript" src="<c:url value="/ajax.js"></c:url>"></script> //引用自己封装的ajax.js代码
<script type="text/javascript">
    window.onload = function(){
        //加载分类的值
        request({
            method: "POST",
            resource: "/CatagoryServlet",
            params: "method=queryCatagories",
            returnType: "json",
            callback: function (data) {
                var left = document.getElementById("left");
                left.innerHTML = "";//清空所有的数据，然后添加超链接标签
                var li = document.createElement("li");
                var a = document.createElement("a");
                var text = document.createTextNode("全部分类");
                a.appendChild(text);
                a.href = "/BookServlet?method=queryAll";
                li.appendChild(a);
               // ul.appendChild(li);
                left.appendChild(li);
                for(var i = 0; i < data.length; ++i){
                    var li = document.createElement("li");
                    var a = document.createElement("a");
                    var text = document.createTextNode(data[i].name);
                    a.appendChild(text);
                    a.href = "/BookServlet?method=queryByCatagoryId&id="+data[i].id;
                    li.appendChild(a);
                   // ul.appendChild(li);
                    left.appendChild(li);
                }
                left.appendChild(ul);
            }
        })
    }
</script>

封装的ajax.js代码:

function createXMLHttpRequest(){
    //根据浏览器的类型不同，创建XMLHttpRequest的方式也不同
    try{
        return new XMLHttpRequest();//大多数浏览器是直接返回XMLHttpRequest
    }catch(e){
        try{
            return new ActiveXObject("MsXML2.XMLHttp");//IE6
        }catch(e){
            try{
                return new ActiveXObject("Microsoft.XMLHttp");//IE5甚至更早版本的
            }catch(e){
                throw e;
            }
        }
    }
}
/*
option是一个对象，其中这个对象中含有属性:
method : 请求的方法，如果没有传递，那么默认是GET
resource: 请求资源
isSYN: 是否同步
params: 请求体，如果没有传递，默认为null
callback: 回调函数
returnType: 返回的类型，默认的是text，即调用responseText
 */
function request(option){
    //获取xmlHttpRequest对象
    var xmlHttpRequest = createXMLHttpRequest();
    if(option.method == undefined){
        option.method = "GET";
    }
    if(option.isSYN == undefined){
        option.isSYN = true;
    }
    if(option.params == undefined){
        option.params = null;
    }
    if(option.returnType == undefined){
        option.returnType = "text";
    }
    //2、和服务器建立连接
    xmlHttpRequest.open(option.method,option.resource,option.isSYN);
    //3、发送请求数据，但是需要判断是否是POST请求
    if(option.method == "POST"){
        //如果是POST请求，那么需要设置请求头
        xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }
    //发送请求数据
    xmlHttpRequest.send(option.params);
    //4、等待服务器的响应
    xmlHttpRequest.onreadystatechange = function(){
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
            //判断响应的类型
            var data;
            if(option.returnType == "text"){
                data = xmlHttpRequest.responseText;
            }else if(option.returnType == "xml"){
                data = xmlHttpRequest.responseXML;
            }else{
                //如果是json，那么首先需要调用responseText
                var text = xmlHttpRequest.responseText;
                data = eval("(" + text + ")");
            }
            option.callback(data);
        }
    }
}

类似购物商城那样展示图书

如上面所示，我希望在右边显示图书的时候，是这样展示的，那么我们在执行相应的方法，将从数据库中查询到的数据books保存到request域之后，转发到当前这个界面，那么我们将通过什么方式来显示上面的图片呢？这里我主要是利用了jstl中的标准库core，即<c:forEach>标签，这样就可以进行循环了。但是我希望的是每一行显示6本书，那么这时候就需要使用的是双层嵌套循环了。对应的代码如下:

<table>
   <c:forEach var="i"  begin="0" end="${requestScope.books.size() - 1}" step="6"> <!--step = 6，即相当于 i += 6-->
       <tr>
           <c:forEach var="j" begin="${i}" end="${i + 5}">
               <c:if test="${j < requestScope.books.size()}">  <!--判断j是否发生了越界-->
                   <td>
                       <a href="/BookServlet?method=queryById&id=${requestScope.books.get(j).id}">
                               <img src="<c:url value='/images/${requestScope.books.get(j).name}.png'></c:url>">
                       </a>
                       <p>${requestScope.books.get(j).name}</p>
                       <p>${requestScope.books.get(j).price}元</p>
                   </td>
               </c:if>

           </c:forEach>
       </tr>
   </c:forEach>
</table>

在上面的代码中需要注意的是

• 因为保存到request语中的books是一个List<Book>,所以这里如果我们需要获取元素的个数，是和java中List的用法一样，调用size()方法，而不是${requestScope.books.size}.同理，获取某一个下标的元素的时候，需要调用的是get方法来获取。
• 在第二层循环中，j 需要从 i的值开始遍历，直到 j = i + 5,这时候begin需要是${ i },end必须是${ i + 5},否则，如果begin = i，那么就会将begin看成是一个字符串i，而不是获取i的值，同样的道理，如果是将end = ${ i } + 5的话，那么这时候虽然已经将i的值取出来了，但是这时候只会将end看成是一个字符串，所以需要将5放到花括号里面。