0

Ajax/Jquery を介してフォームを送信し、アコーディオン ステップ プロセス内でサーブレットから応答を取得しようとしていますが、私の人生では、これを理解できません。フォームとアコーディオンはそれぞれ独立して動作していますが、これら 2 つを一緒にすると動作しません。

ここに私がまとめたコードがあります：

$(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 テキストが変更され、最初のアコーディオンが閉じて 2 番目のアコーディオンが開きます。これまでのところ、ページを更新するだけで、アドレスバーに次のように表示されます。

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

しかし、他には何も起こりません。

画面上のコードの量を制限するために、最初のアコーディオン コードのみを含めました。残りが必要な場合は、投稿できます。

前もって感謝します。

サーブレット コード

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.");
                        }
                }
}
4

1 に答える 1

0

jQuery ajax（）を呼び出した場所で、データプロパティを文字列ではなくJSONに変更します。例

$.ajax({ ..., data: { "name": name, "gender": gender }});
于 2012-09-13T20:13:28.457 に答える