使用数组将动态添加的li和ul元素保存到数据库

Question

我正在尝试构建一个应用程序的用户界面，用户可以在单击添加问题时添加ul和li元素，我成功地开发了前端部分，这是一个预览：

但是问题是当将其保存到数据库中时，我不知所措，这有什么办法可以将数据保存到数组中，以便可以用php显示它们，欢迎任何想法。
/>

这是jquery代码：

wrapper.on("click", "button", function(e){ 
        e.preventDefault();
        var parent = $(this).parent().parent().parent().parent().parent().parent();
        var parentID  = $(this).attr('element-id');
        var elementID = 1000000000000000000*Math.random();
        parentIDs.push(elementID);
        if($(this).attr('class') == "add_field_button btn btn-success"){
           if(parent.find('ul').length){
            parent.find('ul').first().append(`
            <li>
              <div class="panelcb white-box">
                    <div class="form-horizontal form-material">
                    <div class="form-group">
                  <label class="col-md-12">Question</label>
                    <div class="col-md-12">
                            <input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-12">Response</label>
                        <div class="col-md-12">
                            <input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
                    </div>
                    <div class="form-group">
                  <div class="row">
                    <div class="col-sm-4">
                        <button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
                    </div>
                    <div class="col-sm-4">
                        <button class="delete_field_button btn btn-error" >Delete</button>
                    </div>
                  </div>
                </div>
                    </div>
                  </div>
            </li>`); 
           }else{
            $(this).closest('li').append(`
            <ul><li>
              <div class="panelcb white-box">
                <div class="form-horizontal form-material">
                  <div class="form-group">
                      <label class="col-md-12">Question</label>
                      <div class="col-md-12">
                          <input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
                  </div>
                  <div class="form-group">
                      <label class="col-md-12">Response</label>
                      <div class="col-md-12">
                          <input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
                  </div>
                  <div class="form-group">
                  <div class="row">
                    <div class="col-sm-4">
                        <button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
                    </div>
                    <div class="col-sm-4">
                        <button class="delete_field_button btn btn-error" >Delete</button>
                    </div>
                  </div>
                </div>
                </div>
              </div>
            </li></ul>`); 

            }
       }else if($(this).attr('class') == "delete_field_button btn btn-error"){
        parent.remove();
       }

谢谢。

Answer 1

好吧...

如果我将整个用户交互区域称为游乐场，则可以将其放置在容器中：

<div id='playground'>

.. all the ul's and li's..

</div>

如果您有表格或其他东西：

<form action='/' id='form-playground' method='post'>
   <textarea id='playground-container' name='playground' class='hidden'> 
   </textarea>
   <input type='submit' value='Save My Playground'>
</form>

然后在提交后，您可以将游乐场的内容复制到隐藏的文本区域：

$(document).ready(function () {
    $('#form-playground').on('submit', function () {
        $('#playground-container').html($('#playground').html());
        return true;
    });
 });

或者是AJAX帖子：

$.post( PostUrl, { playground: $('#playground').html() } );