1

ここに私のフォームがありますが、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の2番目のpタグに配置する方法を考えています。追加ボタンを押します...うまくいけば、divを継続的に追加できるスクリプトがあります。助けていただければ幸いです。AJAXでdivを追加するためにオンラインで検索しましたが、何も機能していません。おそらく、ページの他の場所で他のajax呼び出しを行っているためですか？それがそれに影響するかどうかわからない

4

3 に答える 3

2

これは、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の例を用意しました：例

于 2012-09-14T19:55:45.667 に答える
1

これを試して：

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

于 2012-09-14T19:41:57.153 に答える
1

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
}
于 2012-09-14T19:42:16.290 に答える