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

【问题标题】：create div using form data with Ajax / Jquery使用带有 Ajax / Jquery 的表单数据创建 div
【发布时间】：2012-09-14 19:36:00
【问题描述】：

这是我的表单，但不知道我是否已正确设置它以用于 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 调用？不知道会不会有影响

【问题讨论】：

标签： jquery ajax

【解决方案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

【讨论】：

我亲爱的主啊，它工作得很好，然后一旦 div 被填充，页面就会刷新，它会回到没有 div 的状态......任何想法为什么会这样？
听起来像是 PostBack 的结果。如果您使用的是 ASP.NET，请考虑为执行“刷新”的元素禁用 PostBack。如果它是一个按钮，您可以执行<asp:Button ID="btnMyButton" runat="server" Text="Foo" OnClientClick="javascript:return false;" /> 之类的操作。或者，更简单的是，不使用服务器控件，只需使用标准 html 按钮（不使用 runat="server"）。顺便说一句，这是一个单独的问题，与我给出的答案没有任何关系（确实有效）。
我把 return false;在append函数之后的click函数内部并且它工作......不确定它的代码是否正确但它工作正常？！？！？！......非常感谢！！！

【解决方案2】：

您的 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
}

【讨论】：

这似乎应该可以工作，但我无法让任何类型的 jquery create div 脚本工作，这可能是因为我在页面的其他地方运行其他 ajax？这是我用来获取 xml 的另一个 ajax 的开始... $.get('Data.xml', function(xmldata) {});另外，我将如何附加您提供的所有代码？？

【解决方案3】：

试试这个：

$('<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/

【讨论】：