如何使用 servlet + ajax 制作动态内容

Question

我正在尝试学习 jsp + servlet，如果我基本上做到了，一切都会顺利（jsp 将数据发送到 servlet，然后 servlet 从 db 获取数据并设置属性并转发到新页面）但是当我尝试时出现问题要在不重新加载页面的情况下更新某些内容（使用 ajax 将数据发送到 servlet 并转发到 jsp 文件，我使用 jquery 来加载特定的），并没有改变该内容。

小服务程序

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");
    PrintWriter out = response.getWriter();
    try {
        /* TODO output your page here. You may use following sample code. */
        int id = Integer.parseInt(request.getParameter("id"));

        Database db = new Database();
        ProductTable productTable = new ProductTable(db);
        Product product = productTable.findByID(id);
        db.close();

        request.setAttribute("productDetail", product);
        request.getRequestDispatcher("/view/backend/selectProduct.jsp").forward(request, response);
    } finally {
        out.close();
    }
}

JSP 模态

<!-- language: html -->
<div class="modal fade" id="modalEditProduct" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="tableSelectProduct">
                    <%@include file="selectProduct.jsp" %>
                </div>
            </div>
            <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                 <button type="button" class="btn btn-primary" id="btnOK">Save</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

模态脚本

$(document).ready(function() {
    $(".viewdetail").click(function() {
        var id = $(this).attr('id');
        $.ajax({
            url: "/BookStore/SelectProduct",
            data: {"id": id},
            type: 'POST',
            cache: false,
            error: function() {
                alert('error');
            }
        });

        $(".tableSelectProduct").load("/view/backend/selectProduct.jsp");
        $("#modalEditProduct").modal('show');
        $("#btnOK").click(function() {
            $("#modalEditProduct").modal('hide');
        });
    });
});

selectProduct.jsp（希望通过不重新加载主页来更新此内容）

<!-- language: lang-html-->
<table width="100%" border="0" class="table" id="center" align="center">
    <tr>
        <td width="14%"></td>
        <td width="63%">
            <label for="thumbnail">Pic</label>
            <a class="thumbnail">
                <img class="resize" src="/BookStore/images/${productDetail.photo}" id="imgprofile" 
                     data-src="/BookStore/asset/js/holder.js/130x100">
            </a>
        <td width="23%"><span id="titleNotice"> * ( required )</span></td>
    </tr>
    <tr>
        <td width="14%"></td>
        <td width="63%">
            <label for="titleNotice">Title</label>
            <input type="text" class="form-control" name="title" 
                   onblur="checkEmpty(this, 'titleNotice')" value="${productDetail.title}"></td>
        <td width="23%"><span id="titleNotice"> * ( required )</span></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <label for="titleNotice">ISBN</label>
            <input type="text" class="form-control" id="form-control" 
                   value="${productDetail.isbn}" onblur="checkEmpty(this, 'ISBNNotice')">
        </td>
        <td><span id="ISBNNotice"> * ( required )</span></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <label for="titleNotice">Catagory</label>
            <input type="text" class="form-control" id="form-control" readonly="true"
                   value="${productDetail.catagory}" name="catagory" onblur="checkEmpty(this, 'ISBNNotice')">
        </td>
        <td>
            <label for="titleNotice"></label>
            <button type="button" class="btn btn-primary" id="addCatagory">
                Change Catagory
            </button>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <label for="titleNotice">Author</label>
            <input type="text" class="form-control" id="form-control" 
                   value="${productDetail.author}" name="author" onblur="checkEmpty(this, 'authorNotice')"></td>
        <td><span id="authorNotice"> * ( required )</span></td>
    </tr>
    <tr>
        <td height="130"></td>
        <td>
            <label for="titleNotice">Detail</label>
            <textarea name="detail" rows="5" class="form-control" id="form-control" 
                      onblur="checkEmpty(this, 'detailNotice')" >${productDetail.detail}
            </textarea>
        </td>
        <td><span id="detailNotice"> * ( required )</span></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <label for="titleNotice">Price</label>
            <input type="text" class="form-control" id="form-control" 
                   value="${productDetail.price}" name="price" onblur="checkEmpty(this, 'priceNotice')">
        </td>
        <td><span id="priceNotice"> * ( required )</span></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <label for="titleNotice">Stock</label>
            <input type="text" class="form-control" id="form-control" 
                   value="${productDetail.quantity}" name="quantity" 
                   onblur="checkEmpty(this, 'stockNotice')"></td>
        <td><span id="stockNotice"> * ( required )</span></td>
    </tr>
</table>

Answer 1

看起来您缺少成功属性。

 $.ajax({
        url: "/BookStore/SelectProduct",
        data: {"id": id},
        type: 'POST',
        cache: false,
        success: function(response) {
            //  Add in what to do when ajax call is successful
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert('error');
        }

Answer 2

要找出 ajax 中的真正问题，最好使用下面的 AJAX 调用结构。 对于 JQuery AJAX 调用，最好始终保持这一点。

$.ajax({

    type:         "POST",
    url:          "/BookStore/SelectProduct",
    dataType:     "text/xml",
    data:         "",
    processData:  false,  // default to true will parse data as an Array whereas we send XML
    contentType:  "text/xml",
    async:        false,
    beforeSend: function (request)
    {
        // to set some formats
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {  

        if (XMLHttpRequest.status == 400) {
             // Bad Request
             if (XMLHttpRequest.responseText.indexOf("DOMAIN_NOT_FOUND") != -1) {
              alert('invalid domain');

              return false;
             }
      }
      else if (XMLHttpRequest.status == 401) {
             // User/Pass Invalid
       alert('invalid authentication');
          return false;
      }
      else{
       alert('error'+XMLHttpRequest.responseText);
         return false;
      }
    },
    success: function(xml) {
        /* right your logic here */
        return;  
    }  });

谢谢， 奇兰吉维