Question

继承我的表格，不知道我是否已正确设置以便与AJAX一起使用...

<form id="form" method="post">
<input id="cloudName" name="cloudName" type="text" placeholder="Enter cloud name">
<input id="cloudFamily" name="cloudFamily" type="text" placeholder="Enter cloud family">
<button id="add" type="submit" name="add">Add</button>
</form>

我基本上想知道如何使用class =“cloud”创建div并将第一个输入项“cloudName”放在div中的第一个p标签中，将“cloudFamily”放在div中的第二个p标签中我们按下添加按钮时创建...希望有一个脚本可以让我们不断添加div。任何帮助赞赏。我在网上搜索了用AJAX添加div但没有任何工作，也许是因为我在页面的其他地方进行其他ajax调用？不知道这是否会影响

Answer 1

这是一个适用于您的示例，假设您能够使jQuery正常工作。请注意，这假设您有一个名为 cloudcontainer 的容器（用于放置新div）：

<div class="cloudcontainer"></div>

Javascript看起来像这样：

$('.cloundcontainer').append('<div class="cloud"><p>'+$('#cloudName').val()+'</p><p>'+$('#cloudFamily').val()+'</p></div>');

生成的HTML将如下所示：

<div class="cloundcontainer">
    <div class="cloud">
        <p>...</p>
        <p>...</p>
    </div>
</div>

我已在此链接准备了一个有效的JSFIDDLE示例：Example

Answer 2

试试这个：

$('<div/>', {
    'class': 'cloud',
    html: '<p></p><p></p>'
}).prependTo('form');    


$('.cloud p').each(function(i,v){
    $(this).append($('form input').eq(i))
})

http://jsfiddle.net/Wb8TZ/

Answer 3

你的AJAX回调看起来像这样：

success: function(data) {
   $('<div class="cloud">'); // Creates the holder div
   $('<p class="cloudname">').html(data.cloudname).appendTo('.cloud'); // Create the cloud name p element and attach to cloud placeholder
   $('<p>').html(data.cloudfamily).appendTo(".cloudname"); // Do the same for the cloudfamily
}

使用带有Ajax / Jquery的表单数据创建div

3 个答案: