如何将表单从jQueryFancy框提交到spring控制器类？

我有一个jquery document ready函数，它包含一个fancy box，我为它提供了一个要呈现的html，我需要从fancy box提交该表单，并将其提交给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
        });
    }
  });

因为我对这两个领域都不熟悉，所以我在这里进行探讨。 谢谢你的帮助。谢谢

您可以向控制器发出请求

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

---

嗨，我自己找到了解决办法

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

我没有得到预期的结果。请告诉我Ajax如何与我的花式方框HTMLY配合使用。您需要在formmapBtn中用按钮id替换formButton。您还需要在表单中添加csrf保护。对于使用spring提交的表单，请在完成此指南后，从中修复您的问题。您的操作定义不正确。另外，在您的控制器中，PostMapping不适合我给定的js代码段。应该是@PostMapping/mapping。我还更新了给定的js代码。表单值的序列化需要在sendForm函数内部。因此，它序列化每个提交表单事件上的数据

                $( "#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");
                    }
                });
            }
        });