Ajax每个函数响应都是空白的

Question

我正在使用spring和ajax搜索产品示例。我尝试使用表中的每个函数显示结果。但是在显示标题的情况下获得空白响应。在firebug响应字段显示[]。

控制器

@RequestMapping(value="searchproduct", method=RequestMethod.POST,
            produces = MediaType.APPLICATION_JSON_VALUE, 
            consumes = MediaType.APPLICATION_JSON_VALUE)
    public @ResponseBody List<Product> searchProduct(@RequestBody @RequestParam(required=false, defaultValue="productName") String productName,
            Map model) {

        List<Product> productResults = productService.searchProductByName(productName);
        return productResults;
    }

DAOImpl

public List<Product> searchProductByName(String productName) {
            Criteria criteria = sessionFactory.getCurrentSession().createCriteria(Product.class);
            criteria.add(Restrictions.ilike("productName", "%"+productName+"%"));
            return criteria.list();    
        } 

ServiceImpl

@Transactional
    public List<Product> searchProductByName(String productName) {
        return productDAO.searchProductByName(productName);
    }

JSP

    <script type="text/javascript">
       $(document).ready(function() {

              $('#searchForm').submit(function(event) {

                  var productName = $('#productName').val();

                  var json = { "productName" : productName };

                $.ajax({
                    url: $("#searchForm").attr( "action"),
                    data: JSON.stringify(json),
                    type: "POST",

                    beforeSend: function(xhr) {
                        xhr.setRequestHeader("Accept", "application/json");
                        xhr.setRequestHeader("Content-Type", "application/json");
                    },
                    success: function(productResults) {

                        $('#searchTable').
                        append("<thead><tr><th>Product Name</th><th>Price</th></tr></thead>");
                        $('#searchTable').append("<tbody>");
                        var tableContent = "";

                        $(productResults).each(function(index, product){
                            tableContent +=
                            '<tr><td> ' +
                            product.productName+' </td><td> ' +
                            product.price+' </td></tr>';
                            });
                            $('#searchTable').append(tableContent);
                            $('#searchTable').append("</tbody>");     
                    }
                });

                event.preventDefault();
              });

            });      

       </script>

    <form id="searchForm" action="searchproduct.json" > 
        Product Name: <input type="text" name="productName" value="${product.productName}"
                        id="productName" />
                <input type="submit" value="Search" />
             </form>

    <div id="formResponse">
    <table id="searchTable">
    </table>
</div>