如何使用 jquery 检索动态创建的 html 元素数据

Question

我是 JQuery 和 Web 开发的新手。我正在开发一个动态 Web 应用程序。我在前端使用 html 和 JQuery，通过 servlet 与服务器端通信。我创建了许多问题页面，其中问题从数据库中检索并插入到单个 html 文件中。所以每一页都包含一个动态创建的问题。我需要从输入元素中选择答案，这些输入元素可能是单选、复选框、文本、滑块。问题是，我希望以相同的问题顺序得到答案。我打算将它们存储在一个用“;”分隔的var中并通过 servlet 将其传递到服务器端，然后存储。单击下一个按钮时，如何使用 JQuery 获取选定的值？ 提前感谢您的帮助。

这是一个生成的示例问题代码：

<div data-role="page" id="question1">
    <div data-role="header">
        <h1>Header</h1>
    </div>
<div data-role="content">
        <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Gender:</legend>
                <input type="radio" name="singleSelection" id="choice1">
                <label for="choice1">Male</label>
                <input type="radio" name="singleSelection" id="choice2">
                <label for="choice2">Female</label>
        </fieldset>
        <fieldset class="ui-grid-a">
            <div class="ui-block-a"><input type="button" value="Next" data-theme="b"></div>
        </fieldset>
        </div>  
    </div>
   </div>

<div data-role="page" id="question2">
    <div data-role="header">
        <h1>Header</h1>
    </div>
<div data-role="content">
     <fieldset data-role="controlgroup">
        <legend>What are your hobbies?</legend>  
        <input type="checkbox" name="multiSelection0" id="multiSelection0"> 
        <label for="multiSelection0">Cinema</label>  
        <input type="checkbox" name="multiSelection1" id="multiSelection1"> 
        <label for="multiSelection1">Football</label>  
        <input type="checkbox" name="multiSelection2" id="multiSelection2">
        <label for="multiSelection2">Basketball</label>  
     </fieldset> 
     <fieldset class="ui-grid-a">
           <div class="ui-block-a"><input type="button" value="Next" data-theme="b"></div>
     </fieldset></div></div>

Answer 1

$(".ui-block-a input").click(function() {
   var results = new Array();
   var contents = $(this).parents("div").parents("div").find("input");
    contents.filter(":checked").each(function() {
        var idx = $(this).index();
       results.push($(this).parent().children().get(idx+1).innerHTML);
    });
    contents.filter(":text").each(function() {
        results.push($(this).val());
    });

    alert(results.join(";"));
});

JSFiddle Demo

这将警告用分号连接的值；然后，您可以将其传递给您需要的任何东西。这是对文本输入问题的 HTML 结构做出一些假设。对于滑块，您使用的是 HTML5 还是 jQuery UI，还是其他？

Answer 2

下面的代码会将 data=1 和 info=2 发布到 your_generator.php 脚本，并且应该是有效 HTML 的响应将放置在名为 localdiv 的 div 中。

在 your_generator.php 中，您可以通过 $_POST['data'] 和 $_POST['info'] 访问数据和信息。是的，这只是 PHP 的一个示例，您可以使用任何其他服务器端脚本，并且可以使用任意数量的参数。服务器端脚本应该检查这些参数并生成 HTML 片段，然后 echo 将其输出。

$.post("your_generator.php", {data:1, info:2}, function(data, s) {
     $('#localdiv').html(data);
}, "html");

编辑

要将数据发送回服务器，只需将生成的 HTML 更改为用普通表单包装，例如：

<form action="my_script.php" method="post">
<!-- lots of html and inputs -->
</form>

当您将其放入任何本地容器中时，表单的行为将与其他任何容器一样，并将数据提交到您的服务器脚本。