使用JQuery Ajax將表單提交給servlet

Question

當我們使用Jquery Ajax單擊span標記並從servlet獲取輸出時，我們如何將Form提交給servlet？ 下面是計算器示例代碼。 如果我使用input type =“submit”而不是span，我在index.html中得到了正確的結果，但如果我使用span而不是輸入類型進行提交，我將被定向到servlet頁面。

的index.html

<form name="form1" method="POST" action="Ajaxexample" id="form1">
  <table>
   <tr>
     <td>Number 1</td><td><input type="text" name="n1"/></td>
   </tr>
   <tr>
     <td>Number 2</td><td><input type="text" name="n2"/></td>
   </tr>
    <tr>
     <td></td><td><span onclick="form1.submit()">Calculate</span></td>
    </tr>
     <tr>
       <td>Result</td><td><input type="text" value="" id="result"/></td>
     </tr>
    </table>
 </form>
    <script src="script/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">

    var form = $('#form1');
    form.submit(function () {

     $.ajax({
     type: form.attr('method'),
     url: form.attr('action'),
     data: value,
     success: function (data) {
     var result=data;
     $('#result').attr("value",result);
     }
     });
     return false;
     });
     </script>

Ajaxexample.java

     protected void doGet(HttpServletRequest request, HttpServletResponse response)throws 
     ServletException, IOException {
         response.setContentType("text/html;charset=UTF-8");
         PrintWriter out = response.getWriter();

         int n1 = Integer.parseInt(request.getParameter("n1"));
         int n2 = Integer.parseInt(request.getParameter("n2"));

        out.println(n1 + n2 + "");

       }
       }

web.xml中

      <display-name>Ajax</display-name>
     <welcome-file-list>
      <welcome-file>index.html</welcome-file>
       <welcome-file>index.htm</welcome-file>
       <welcome-file>index.jsp</welcome-file>
      <welcome-file>default.html</welcome-file>
     <welcome-file>default.htm</welcome-file>
      <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
     <servlet>
         <servlet-name>Ajaxexample</servlet-name>
         <servlet-class>Ajaxexample</servlet-class>
         </servlet>
         <servlet-mapping>
         <servlet-name>Ajaxexample</servlet-name>
         <url-pattern>/Ajaxexample</url-pattern>
         </servlet-mapping>

Answer 1

<span onclick="formSubmit();">Calculate</span>

function formSubmit(){

 $.ajax({
     url:'localhost:8080/Ajax/Ajaxexample',
     data: $("#form1").serialize(),
     success: function (data) {
            $('#result').html(data);
    }
});
}

Answer 2

你的表單方法是post <form name="form1" method="POST" action="Ajaxexample" id="form1">但是你在servlet doGet()中編寫代碼所以你可能沒有正確的結果。如果表單那么。方法是get然后在servlet doGet()將被調用，如果窗體的方法是post那么的servlet doPost()將被調用

Answer 3

你已經清楚地寫了“onclick =”form1.submit（）“>”這就是為什么表單提交....

從提交＆刪除onClick（）方法

     <span id="calc">Calculate</span

並替換

    form.submit(function () {

划線

      $( "#calc" ).click(function(){