如何在Bootstrap中使用AJAX发送表单数据

Question

我有一个由twitter bootstrap设计的web应用程序。有一个带有小表单的JSP页面，我需要在不重新加载页面的情况下将其数据发送到Servlet。下面是我的表格。

<!--add custom item -->
<div class="modal fade" id="customItemModel" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"> <a href="#" data-dismiss="modal"> <img src="images/arrow-back-512.png"  width="30px" height="30px"> <small>Back</small></a> <span id="myModalLabel" style="margin-left:20px;"><font size="+2"><b>Add Custom Item</b></font></span> </div>
      <div class="modal-body">
          <form class="form-horizontal" method="get" action="PastSurgicalCustomItem" id="customItemForm"  onsubmit="formSubmit(); return false;">
        <fieldset id="modal_form">
          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-1 control-label" for="textinput">Name</label>
            <div class="col-md-8">
              <input name="customName" type="text" placeholder="" class="form-control input-md">
            </div>
          </div>

          <div class="modal-footer">
              <button id="additional" class="btn btn-primary" data-dismiss="modal">Submit</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>
<!-- /add custom item -->  

我使用下面的ajax查询将数据发送到servlet。这个代码在上面表格的同一页上。

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
   var form = $('#customItemForm');
   var counter=0;
  function formSubmit(){
 $.ajax({
     url:'PastSurgicalCustomItem',
     data: $("#customItemForm").serialize(),
     success: function (data) {

            //alert($textbox.attr("id"));
    }
});
}
</script>

我们还将以下脚本加载到了JSP页面中。

!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

下面是我的servlet。

import DB.PastSurgicalHistoryTypeTable;
import beans.main.PastSergicalHistoryTypeBean;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
/**
 *
 * @author Yohan
 */
public class PastSurgicalCustomItem extends HttpServlet {
    /**
     * Processes requests for both HTTP <code>GET</code> and <code>POST</code>
     * methods.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/plain");  // Set content type of the response so that jQuery knows what it can expect.
        response.setCharacterEncoding("UTF-8");
        String name = request.getParameter("customName");
        System.out.println(name);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    @Override
    public String getServletInfo() {
        return "Short description";
    }
}

我遇到的问题是ajax没有将数据发送到servlet。我在没有引导程序的情况下使用了相同的代码，所以我在想引导程序是否必须对此做些什么。我该如何解决这个问题？

Answer 1

我设法解决了这个问题。它与bootstrap的工作方式不同。下面是我的新代码。

<script>
 $(function() {
//twitter bootstrap script
 $("button#submit").click(function(){
         $.ajax({
     type: "POST",
 url: "PastSurgicalCustomItem",
 data: $('form.form-horizontal').serialize(),
         success: function(msg){
                  alert(msg);
         },
 error: function(){
 alert("failure");
 }
       });
 });
});
</script>

你可以从这里得到更多的想法-http://www.krizna.com/jquery/jquery-ajax-form-submit-using-twitter-bootstrap-modal/