2

spring mvc でフォームに ajax ベースの投稿を実装しようとしています。

これが私のコードです：

<form:form method="POST" commandName="emailDomain">
    <form:textarea path="emailText" rows="5" id="emailList"
        placeholder="Write emails to submit us, saperated by ';'"
        style="width: 100%" />

<form:select items="${categoryMap}" path="categoryId" id="categoryList"
    onchange="showEmails()" />

    <br />
    <p align="center">
        <button type="button" value="Submit" id="submitEmails">Submit emails</button>
    </p>
    <p align="center" class="text-info">${var}</p>
</form:form>

私のajaxコードは次のとおりです。

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>

     <script type="text/javascript">
     function showEmails() {

            var categoryId = $('#categoryList').val();
    var emailText = $('#emailList').val();

    $.ajax({
        type : "POST",
        url : "http://localhost:8081/chatbooster/forms/email.html?cat=1",
                data : "categoryId=" + categoryId + "&emailText=" + emailText,
        success : function(response) {


        },
        error:function (xhRequest, ErrorText, thrownError) {
            alert('Error: '  + '  ' + thrownError);
        }
    });
}

問題は、ボタンをクリックした後、アラートとしてエラーが表示されますが、説明がありません。その後、json 応答を示すページにジャンプします。spring form タグをまったく使用しない場合、コードは機能します。エラーは表示されず、json 応答も表示されませんが、データベースからドロップダウンを選択することはできません。

私のコントローラーは：

@Controller
  @RequestMapping(value = "/email.html")
  public class EmailController{

    @RequestMapping(method = RequestMethod.GET)
      public String showForm(Model model,
          @RequestParam(value = "cat", required = true) String category,
          HttpServletRequest request, HttpServletResponse response) {
        clearSession(request, response);

        return "email";
      }

    @RequestMapping(value = "/submitemails", method = RequestMethod.GET)
      public @ResponseBody
      String submitAndRefreshEmails() {
        System.out.println("check");

        return "email";
      }

    @RequestMapping(method = RequestMethod.POST)
      public @ResponseBody
      EmailJsonResponse addEmail(@Valid EmailDomain emailDomain,
          BindingResult result,
          @RequestParam(value = "cat", required = true) String category,
          HttpServletRequest request, HttpServletResponse response)
      throws Exception {

        //return emailjsonresponse object, a simple object carrying few ints and strings

      }

    @ModelAttribute("categoryMap")
      public Map<Long, String> populateCategoryList(
          @RequestParam(value = "cat", required = true) String category)
      throws Exception {

        // populating drop down 

      }

  }

これについて多くの議論を読みましたが、このような状況にする方法がわかりませんか? 誰でもここで私を助けてもらえますか? この例を参照しています http://www.javacodegeeks.com/2012/02/spring-mvc-and-jquery-for-ajax-form.html

編集1：

私もこの新しいものを試しました：

<script type="text/javascript">
  $(document).ready(function() {
      $('#submitEmails').onclick(function() {
          $.getJSON('http://localhost:8081/chatbooster/forms/submitemails.html?cat=1',
                {
                    categoryId : $('#categoryList').val(),
                    emailText : $('#emailList').val(),
                    ajax : 'true'
                }, 
                function(data) {
                    alert('data found');
                }
          );
      });
  });

しかし、まだjson応答が表示されています。なぜそれが起こっているのか理解できませんか？このhttp://rockhoppertech.com/blog/spring-mvc-3-cascading-selects-using-jquery/を試しました。スプリング フォーム コンポーネントを使用しない場合、ajax を実装できます。しかし、それはデータベースからドロップダウン要素を入力するのに問題を引き起こします。欠けているものがあります。それが何であるかについてのアイデアはありますか？

編集 2

これで、この問題の原因がわかりました。最終的にjson応答につながるフォームを送信していることです。私がする必要があるのは、ボタンからjquery関数を呼び出して、送信タイプではなくボタンタイプの送信ボタンを作成することです。それをクリックすると、コントローラーの GET リクエスト タイプに関連するメソッドが呼び出されます。しかし、そのためには、送信ボタンをクリックしたときに submitAndRefreshEmails メソッドを呼び出す必要があります。誰かがそのために行く方法を教えてもらえますか? コントローラにそのようなタイプのメソッドが多数ある場合に、GET タイプの特定のメソッドを呼び出す方法は?

4

1 に答える 1

0

AJAX 呼び出しを行っているため、HTML ページを (再) ロードすることなく、情報のスニペット (JSON データ) を返すことを期待しています。したがって、の使用法@ResponseBody。

AJAX 呼び出しがフォーム送信にバインドされている場合、ページの読み込みがトリガーされます (これを説明する適切なソースが見つからないようです)。したがって、デフォルトの動作を停止する必要があります。

$form.bind('submit', function(e) {
    $.post('epdReviewSaveChanges.json', mData, function(response) {
            //do stuff...
    }

    e.preventDefault();
    return false;
});

hereから取得した、上記の簡単な説明。

e.preventDefault()そのコードの一部により、ブラウザはデフォルト アクションを実行できなくなります。 return false;また、そのイベントが DOM に伝播 (または「バブルアップ」) するのを防ぐという点で、物事をもう少し進めます。

あなたが抱えている元の問題は、AJAX呼び出し/Springの使用方法に関係していると思われます。私はクロスドメインの問題について話しているわけではなく、追加のソリューションや別のソリューションが必要になる可能性があります。

問題 2コントローラー内の特定のメソッドへのマッピングに関しては、 を使用しvalueて異なる呼び出しを区別できます。元：

@RequestMapping(value="/Upload.html",method = RequestMethod.POST)
于 2013-03-21T23:24:32.600 に答える