Question

我想构建一个包含问题和选择的页面。为简化起见，请考虑以下代码：

<div id="page">
   <div class="number"> 
       <p class="question">Question 1</p> 
       <ul class="choise">
            <li> Choise a </li>
            <li> Choise b </li>
            <li> Choise c </li>
       </ul>
   </div>
   <div class="number"> 
       <p class="question">Question 2</p> 
       <ul class="choise">
            <li> Choise a </li>
            <li> Choise b </li>
       </ul>
   </div>
   <div class="number"> 
       <p class="question">Question 3</p> 
       <ul class="choise">
            <li> Choise a </li>
            <li> Choise b </li>
            <li> Choise c </li>
            <li> Choise d </li>
       </ul>
   </div>
</div>
<button value="submit" type="button" onClick="submitSurvey()" />

每个人都可以帮助我如何定义submitSurvey（）函数以获取所有问题及其选择，然后通过服务器提交它们吗？

我想通过调用jquery each（）函数来获取所有问题及其答案，但我不知道如何通过数组存储它们，因为它将是多维数组，然后将它们提交给php脚本。

非常感谢你的帮助。

Answer 1

使用jquery和serializeArray此代码提交一个包含php脚本文件问题和答案的多维数组：

<?php

if (isset($_POST['questions'])) 
    var_dump($_POST['questions']);

?>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript'>

    function ConvertSerialAToJSA( data )
    {
        var js_array = Array();

        $.each(data, function (index, el) 
        {
            if (!js_array[el.name]) 
            {
                js_array[el.name] = [el.value];
            } 
            else 
            {
                js_array[el.name].push(el.value);
            }
        });

        return js_array;
    }

    function submitSurvey()
    {
        //get the form data in a serialized array format.
        var data = $('#questions_and_answers').serializeArray();

        //javascript associative array - indexed with 'questions[1][answer]' keys.
        var arr = ConvertSerialAToJSA(data);

        $.ajax({
            url: "/",
            type:'post',
            data: $.param(data),
            success: function( html_data )
                {
                    $("html").html( html_data );
                }
        });     
    }

</script>

<html>
    <body>
        <form action="" method="post" id="questions_and_answers">
            <div id="page">
               <div class="number"> 
                   <p class="question">Question 1 <input type='text' name='questions[1][question]'/> </p> 
                   <ul class="choise">
                    <li><input type='radio' name='questions[1][answer]' value='a'> Choice a</input></li>
                    <li><input type='radio' name='questions[1][answer]' value='b'> Choice b</input></li>
                    <li><input type='radio' name='questions[1][answer]' value='c'> Choice c</input></li>
                   </ul>
               </div>
               <div class="number"> 
                   <p class="question">Question 2 <input type='text' name='questions[2][question]'/> </p> 
                   <ul class="choise">
                    <li><input type='radio' name='questions[2][answer]' value='a'> Choice a</input></li>
                    <li><input type='radio' name='questions[2][answer]' value='b'> Choice b</input></li>
                   </ul>
               </div>
               <div class="number"> 
                   <p class="question">Question 3 <input type='text' name='questions[3][question]'/> </p> 
                   <ul class="choise">
                    <li><input type='radio' name='questions[3][answer]' value='a'> Choice a</input></li>
                    <li><input type='radio' name='questions[3][answer]' value='b'> Choice b</input></li>
                    <li><input type='radio' name='questions[3][answer]' value='c'> Choice c</input></li>
                    <li><input type='radio' name='questions[3][answer]' value='d'> Choice d</input></li>
                   </ul>
               </div>

               <input type="button" value="Save form" onclick='submitSurvey()' />
            </div>
        </form>
    </body>
</html>

我自己的var_dump($_POST['questions']);测试输出（提交后）给出：

array(3) {
  [1]=>
  array(2) {
    ["question"]=>
    string(3) "one"
    ["answer"]=>
    string(1) "b"
  }
  [2]=>
  array(2) {
    ["question"]=>
    string(3) "two"
    ["answer"]=>
    string(1) "a"
  }
  [3]=>
  array(2) {
    ["question"]=>
    string(5) "three"
    ["answer"]=>
    string(1) "b"
  }
}

输入：

enter image description here

请注意，var arr = ConvertSerialAToJSA(data);仅包含在内示范目的。

如何使用ajax存储多维数组

1 个答案: