jquery ajax表單通過java提交servlet

Question

我想通過Ajax/Jquery提交表單，並從手風琴步驟過程中的Servlet獲取響應，但對於我的生活，我無法弄清楚這一點。我有自己的形式，我有手風琴，但是當我把它們放在一起時，它不起作用。

這裏是因爲我已經把它一起代碼：

$(document).ready(function(){ 

$('label.form-field-label-required').append('&nbsp;<strong>*</strong>'); 

// accordion functions 
var accordion = $("#accordion").accordion({ 
     event: false, 
     autoheight: true, 
     animated: "slide", 
}); 
var current = 0; 

$.validator.addMethod("pageRequired", function(value, element) { 
    var $element = $(element) 
    function match(index) { 
     return current == index && $(element).parents("#accordion").length; 
    } 
    if (match(0) || match(1) || match(2)) { 
     return !this.optional(element); 
    } 
    return "dependency-mismatch"; 
}, $.validator.messages.required) 

var v = $("#cmaForm").validate({ 
    submitHandler: function() { 
     $.ajax({ 
        type:"post", 
        url:"ActionServlet", 
        data:"name="+name+"&sex="+gender, 
        success: function(response){ 

        // Change only the header of the file. 
        $("h1").text(response); 
        }, 
       }); 
          if (v2.form()) { 
         accordion.accordion("activate", 1); 
         current = 1; 
        } 
       } 
     }); 

表單代碼：

<h4><a href="#">Employee Personal Information</a></h4> 
    <div> 
      <form name="cmaForm" id="cmaForm" action="" method="post"> 
<h1 style="text-align:center">Hello Guest</h1> 
     <p>Please fill out your name and gender: <br></br> 
    Name: <input type="text" name="name" id="name"/><br/> 
    <input type="radio" name="sex" value="male"/> Male.<br/> 
    <input type="radio" name="sex" value="female"/> Female. </p> 
     <p> 
     <input name="formNext1" type="submit" class="open1 nextbutton" value="Next" alt="Next" title="Next" /> 
     </p> 
    </form> 

什麼是應該發生的是，在成功的H1文本應該改變，以反映輸入數據，然後第一個手風琴關閉，第二個手風琴打開。到目前爲止，所發生的只是頁面刷新，然後在地址欄中顯示：

http://localhost/test/index.htm?name=bnhjhj&sex=female# 

但是沒有其他事情發生。

我只包括第一個手風琴代碼來限制屏幕上的代碼量。如果你需要其餘的，我可以發佈它。

在此先感謝。

servlet代碼

import java.io.IOException; 
import java.io.PrintWriter; 
import javax.servlet.Servlet; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 

public class ActionServlet extends HttpServlet implements Servlet 
{ 

    private static final long serialVersionUID = 1L; 

    /** 
    * 
    */ 
    public ActionServlet() 
    { 
     super(); 
    } 

    /** 
    * 
    */ 
    protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException 
    { 
     doPost(req, res); 
    } 

     public void doPost (HttpServletRequest request, HttpServletResponse response) 
       throws ServletException, IOException { 
        String name= request.getParameter("name"); 
        String gender= request.getParameter("sex"); 
        PrintWriter out= response.getWriter(); 
         if(gender.equals("male")){ 
          out.print("Hello Mr "+ name +" your request was sent successfully."); 
          } 
          else{ 
          out.print("Hello Miss "+ name +" your request was sent successfully."); 
         } 
       } 
} 

Answer 1

您做出調用jQuery的阿賈克斯（），該數據屬性更改爲是JSON而不是字符串。例如

$.ajax({ ..., data: { "name": name, "gender": gender }});