jquery fancyボックスからspringコントローラクラスへフォームを送信するにはどうすればよいですか？

Question

私はhtmlをレンダリングするファンシーボックスを含むjqueryドキュメントレディ機能を持っています。そのフォームをファンシーボックスから提出して、それを春のコントローラクラスに持っていく必要があります。チェックボックスがチェックされているときはいつでも

は

、空想ボックスが表示され、ここで

以下のコードは、私は新しいですので

$("input:checkbox") 
    .click(
    function() { 
    if ($(this).is(':checked')) { 
     var htmlStr = '<div class="form"><form:form method="POST" action="mapping">' + 
      '<label> Map the Selected field to Category ? </label>' 
     + 
      '<select name="category" id="category">' + 
      '<option>COMPANY NAME</option>' + 
      '<option>LINE OF BUSINESS 1</option>' + 
      '</select>' 
     + 
      '<input type="button" name="mapBtn" id="mapBtn" value="MAP" class="ui-button ui-widget ui-corner-all"' + 
      '</form:form></div>'; 
     $.fancybox 
     .open(
     htmlStr, { 
      'width': 950, 
      'height': 1100, 
      'autoScale': false, 
      'transitionIn': 'none', 
      'transitionOut': 'none', 
      'hideOnContentClick': false 
     }); 
    } 
    }); 

コントローラコードが

@PostMapping("mapping") 
public String mapCategory()throws Exception{ 
    try { 
    System.out.println("Welcome to mapping funcion"); 
    } catch (Exception e) { 
    throw e; 
    } 

    return "viewUploadedExcel"; 
} 

を下回っている私のjqueryの化粧箱のコードです両方の分野に私はここでそれを探検する。 ヘルプは高く評価されています。ありがとう

Answer 1

あなたのコントローラにAjax POSTリクエストを行うことができます。

$("#formButton").click(function() { 
     sendForm(); 
    }); 
function sendForm(){ 
    var data = $("#form").serializeArray(); 
    $.ajax({ 
     url: "http://localhost/mapping", 
     data: data 
    }).done(function(responseData) { 
     console.log(responseData) 
    }); 
} 

Answer 2

こんにちは私は、解決策を自分で見つけ

   $("#mapBtn").click(function() { 
         sendForm(); 
          }); 
       function sendForm(){ 
        alert('alert');  
        var selVal= $('#category option:selected').val(); 
        alert(selVal); 
        $.ajax({           
        url : "mapping", 
        data :{selected: selVal}, 
        contentType : "application/json; charset=utf-8", 
        type : 'POST', 
        success : function(result) { 
        alert("success"); 
        } 
       }); 
      } 
     }); 

使用済みAjax呼び出しと成功の結果を得ました。