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

你的表单方法是帖子<form name="form1" method="POST" action="Ajaxexample" id="form1">，但是你在servlet doGet()中编写代码，所以你可能没有正确的结果。如果表单方法是get，那么在servlet {{将调用1}}，如果表单方法为doGet()，则将调用servlet post

Answer 3

你已经清楚地写了“onclick =”form1.submit（）“＆gt;”这就是表格提交的原因....

从提交＆amp;

中删除onClick（）方法

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

＆安培;替换

    form.submit(function () {

排队

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

使用JQuery Ajax将表单提交给servlet

3 个答案: