使用數組將動態添加的 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() } );