如何从 jquery 花式框向 spring 控制器 class 提交表单？

Question

我有一个 jquery 文档就绪功能，它包含一个精美的盒子，我为其提供了一个 html 来呈现，我需要从精美的盒子提交该表单并将其带到控制器 class 共 spring。

当一个复选框被选中时，一个花哨的框出现，代码如下

这是我的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";
}

由于我对这两个领域都不熟悉，所以我在这里进行了探索。感谢帮助。谢谢

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 调用并获得成功结果。

如何从 jquery 花式框向 spring 控制器 class 提交表单？

How to do form submit from the jquery fancy box to the spring controller class?

jquery

spring

fancybox