2017-07-22 34 views
0

我有一個包含一個奇特的框,我提供的HTML渲染的jQuery的文件準備功能,我需要從花哨的箱提交該表格,並把它的控制器類的彈簧。怎麼辦的形式從jQuery看中箱彈簧控制器類提交?

每當一個複選框被選中,將出現一個花哨的框,下面

下面的代碼是我的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"; 
} 

由於我是新到我在這裏探索的兩個領域。 幫助表示讚賞。由於

回答

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) 
    }); 
} 
+0

我沒有得到預期的結果u能告訴我們你們需要我看中箱HTML –

+0

作品Ajax如何在您的形式(mapBtn)按鈕ID替換#formButton。您還需要將csrf保護添加到您的表單中。對於表單提交彈簧結帳本指南(https://spring.io/guides/gs/handling-form-submission/)之後,你能夠從解決您的。你的行爲沒有被正確定義。同樣在你的控制器中,PostMapping不適合我給定的js代碼片段。應該是@PostMapping(「/ mapping」)。 – Rocks360

+0

我也更新了我的給JS codeslippend。表單值的序列化需要在sendForm函數中。所以它會在每個提交表單事件中序列化數據 – Rocks360

0

您好我找到了解決辦法嘍,

   $("#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調用,並得到了成功的結果。