2017-07-22 18 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调用,并得到了成功的结果。