jquery .serialize 不適用於動態生成的表單

Question

我在 .jsp 中使用 Java/Spring。

我正在從 myForm.jsp 中的 myPage.jsp 內的 div 動態加載一個表單（包含表單標簽），並嘗試使用所述數據進行 ajax post 調用。 當我調用 jQuery .serialize 並打印出數據時，它返回空。

但是，如果在 myPage.jsp 中包含表單標記並只加載輸入，則一切正常。

有沒有關於動態加載我做錯的整個表單的事情？

我的頁面.jsp

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> if(window.attachEvent) { window.attachEvent('onload', LoadTable); } else { if(window.onload) { var curronload = window.onload; var newonload = function() { curronload(); LoadTable(); }; window.onload = newonload; } else { window.onload = LoadTable; } } $(document).on('click','#myFormSubmit',function() { var data = $('#myForm').serialize(); console.log("data " + data); //data is empty! return false; }); function LoadTable() { $.get('/url', function(data) { $('#myForm').append(data); console.log('Data was fetched.'); }); } </script>

 <%@ page import="java.util.List" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html> <body> <div id='myDiv'> <!-- myForm.jsp gets loaded here --> </div> </body> </html>

myForm.jsp

<form id='myForm' name='config_cache' action='config_cache' method='POST'>
  <input id='input1' type="checkbox" name="input1" value="true">
  <input id='myFormSubmit' name="submit" type="submit" value="Submit">
</form>

Answer 1

您的表單正在提交 - 您只是尚未向其提交任何數據。 您表單的唯一輸入是未選中的復選框。 根據.serialize()的文檔

注意：只有“成功控制”被序列化為字符串。 沒有提交按鈕值被序列化，因為表單不是使用按鈕提交的。 對於要包含在序列化字符串中的表單元素的值，該元素必須具有 name 屬性。 來自復選框和單選按鈕（“radio”或“checkbox”類型的輸入）的值僅在被選中時才包含在內。 來自文件選擇元素的數據未序列化。

用這個替換你的表單並提交它。 你應該看到：
數據 someName=This+is+a+test&input1=true

<form id='myForm' name='config_cache' action='config_cache' method='POST'>                                                                                    
    <input type="hidden" name="someName" value="This is a test">                                                                                              
    <input id='input1' type="checkbox" name="input1" value="true" checked>                                                                                    
    <input id='myFormSubmit' name="submit" type="submit" value="Submit">                                                                                      
</form>

Answer 2

聽起來您需要在表單中序列化您的復選框，如果未選擇它，它將以空值提交。 這是 javascript 表單序列化的常見要求。 看看這個處理該要求的 jquery 插件：

https://github.com/davemaple/jquery-form2json

這將允許您的表單序列化為： { "input1": null }

Answer 3

對於動態數據，使用 .appendTo() [https://api.jquery.com/appendTo/] 而不是 .append()！

我知道這聽起來如何，但它有效！

jquery .serialize 不適用於動態生成的表單

問題描述

3 個解決方案

解決方案1
0 2015-04-13 16:56:40

解決方案2
0 2016-03-16 01:49:55

解決方案3
0 2020-09-02 13:38:56

jquery .serialize 不適用於動態生成的表單

問題描述

3 個解決方案

解決方案1 0 2015-04-13 16:56:40

解決方案2 0 2016-03-16 01:49:55

解決方案3 0 2020-09-02 13:38:56

解決方案1
0 2015-04-13 16:56:40

解決方案2
0 2016-03-16 01:49:55

解決方案3
0 2020-09-02 13:38:56