Question

我有一个JSP页面，我想使用jquery从中调用servlet。

当我点击按钮时似乎没有任何事情发生。

这是我的JSP页面

<%@ page import="java.util.*;" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<%
ArrayList<String> list = (ArrayList<String>) request.getAttribute("showcategory");
%>
    <title>Agro shop</title>
    <link rel="stylesheet" href="example.css" type="text/css" media="screen" charset="utf-8" />
    <!--[if lte IE 6]><link rel="stylesheet" href="ie6.css" type="text/css" media="screen" charset="utf-8" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" media="screen" charset="utf-8" /><![endif]-->
    <!--Include the SimpleCart(js) script-->
    <script src="javascripts/simpleCart.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <!--Make a new cart instance with your paypal login email-->
    <script type="text/javascript">
        simpleCart = new cart("brett@wojodesign.com");
    </script>
    <script src="js/jquery-1.11.1.js" type="text/javascript"></script>
    <script>
$(document).ready(function() {
        $('#sports').change(function(event) {
                var sports = $("select#sports").val();
                $.get('JsonServlet', {
                        sportsName : sports
                }, function(jsonResponse) {
                        var select = $('#player');
                        select.find('option').remove();
                        $.each(jsonResponse, function(key, value) {
                                $('<option>').val(key).text(value).appendTo(select);
                        });
                });
        });
});
</script>



    <!--CSS for the Cart. Customize anything you damn well please.
        Use Firebug or Webkit's Element Inspector to get a more 
        indepth idea of what simpleCart Generates.
    -->
    <style>
        .cartHeaders,.totalRow{display:none;}
        .simpleCart_items{
            overflow-y:auto;
            overflow-x:hidden;
            height:324px;
            width:243px;
            margin-bottom:20px;
        }
        .itemContainer{
            clear:both;
            width:229px;
            padding:11px 0;
            font-size:11px;
        }
        .itemImage{
            float:left;
            width:60px;
        }
        .itemName{
            float:left;
            width:85px;
        }
        .itemPrice{
            float:left;
            width:85px;
            color:#418932;
        }
        .itemQuantity{
            float:left;
            width:33px;
            margin-top:-12px;
            vertical-align:middle;
        }
        .itemQuantity input{
            width:20px;
            border:1px solid #ccc;
            padding:3px 2px;
        }

        .itemTotal{
            float:left;
            color:#c23f26;
            margin-top:-6px
        }
    </style>



</head>

<body>
<script type="text/javascript">
$(document).ready(function() {                        
    $('#button').click(function() {               
        var selectedText = $("#player option:selected").text();
        $.get('CartProduct',{
            Subcat : selectedText
        }, function(data) {
            data.forEach(function(x, i) {
                var stat = data[i];
                $('#content').append(""+stat);
            });

        });
    });
});
</script>
    <div id="topFrame"></div>
        <div id="content">
            <div id="header">
                <h1>Agro</h1>
                <br />
                Category:
                <select id="sports" name="sportsk">
                <option>Select Category</option>
                <%
                for(int i=0;i<list.size();i++)
                {
                %>
                <option><%=list.get(i) %></option>
                <%} %>
        </select>

                Sub Category:
        <select id="player" name="subcategory">
                <option>Select Sub Category</option>
        </select>
        <input type="button" value="Show Products" name="button" id="button" />
            </div>

        </div>

</body>
</html>

我的jquery有什么问题吗？

我从上面的JSP调用以下jquery（为了简单起见，我在这里写它）

<script type="text/javascript">
    $(document).ready(function() {                        
        $('#button').click(function() {               
            var selectedText = $("#player option:selected").text();
            $.get('CartProduct',{
                Subcat : selectedText
            }, function(data) {
                data.forEach(function(x, i) {
                    var stat = data[i];
                    $('#content').append(""+stat);
                });

            });
        });
    });
    </script>

在jsp上按下按钮调用jquery

0 个答案: