Question

我正在使用动态DIVS使用html和jquery构建一个结构，其中客户端报告div的描述，然后我为div及其描述添加一个数字，该div不在表单中。我需要检索所有这些信息以发送到表单。

如何从div中检索所有信息？

将此信息传递给服务器的最佳方法是什么？

我的想法如下，当我点击发送然后它读取所有div并检索div id及其描述，所以我以我的方式安装结构示例：1div：description = 2div：description = 3div：description，在我挂载这个结构之后，我把这个数据传递给一个输入类型的文本，它隐藏在我的页面中，并且在我的表单标签内然后发送，在服务器端我把这个信息恢复到正常状态，这是正确的吗？但是我可以阅读我的div中包含的信息

$('#add').click(function(){
  
  var number = $('div.children').filter(function(idx){
	        	return $(this).text() != ""
	    	}).length;
  
  var newdiv = '';
  newdiv+='<div class="children">';
  newdiv+='  <b> Div '+(number+1)+' </b>';
  newdiv+='  <p>descript: this is div '+(number+1)+'</p>';
  newdiv+='</div>';
  
  $('#DivFather').append(newdiv);
  
  return false;
});

$('#send').click(function(){
  
  alert('id:div1-descript:this is div 1=id:div2-descript:this is div 2');
  return false;
});

div div {
  height: 50px;
  background: red;
  margin: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="DivFather">

  <div class="children">
    <b> Div 1 </b>
    <p>descript: this is div 1</p>
  </div>

</div>

<a href="" id="add" class="btn btn-primary"> Add Div </a>

<a href="" id="send" class="btn btn-primary"> Send form </a>

Answer 1

如果我理解正确您已将某些信息添加到DIVs，那么当用户点击SEND时，您会读取想要阅读DIVs并将其发送到服务器之类的如果它们是INPUTs中的form。

1st）如果你有＆＃34; raw＆＃34;预先放入DIV的信息，使用该信息而不是从div再次阅读。

这样做的一种方法是使用信息保存javascript数组，并将数组的索引设置为用户单击或选择的元素。您可以在元素（data-id）上使用data-id="1"属性。当元素被clidcked时，你使用jQuery attr获得id（＆＃39; data-id＆＃39;）。您还可以设置元素的id或使用包含id的类并从那里搜索它，但data-属性非常方便。

第2条）要发送信息，请参阅jQuery的$.ajax()或$.POST()，这样您就可以发帖并在“数据”中以多部分形式发送信息。属性。

jQuery.ajax({
            url : 'http://www.example.com',
            type : 'post',
            data : {
                dataField1 : 'some value',
                dataField2 : 'some value',
                dataField3 : 'some value',
                dataField4 : 'some value',
            },
            success : function( response, textStatus, jqXHR  ) {
                // In response you get what the server sends back

            },
            error : function(jqXHR, textStatus, errorThrown ){
                //log to the browser console
                console.log(jqXHR);
            },
            beforeSend: function(jqXHR, settings ){
                //disable the send button after it is clicked
                jQuery("#sendButton").addClass( "disabled");
            },
            complete : function(jqXHR, textStatus ){
                //Enable send button when we are back
                jQuery("#sendButton").removeClass( "disabled");
            }
        });

使用jquery从动态div检索信息以及如何将其发送到服务器

1 个答案: