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

下面的代码会将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">  </form>

当你将它放在任何本地容器中时，表单将表现得像任何其他表单一样，并将数据提交到您的服务器脚本。

Answer 2

$(".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吗？

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

2 个答案: