0

springsource ツール スイートで grails を使用していますが、SQL データベースの更新で問題に直面しています。このページで、ユーザーは住所、市区町村などのプロパティの詳細を入力するように求められます。[保存] ボタンをクリックすると、詳細をデータベースに保存する必要があります。今私がする必要があるのは、ユーザーがボタン「追加」をクリックするたびに、入力フィールド (住所、都市など) をページに動的に追加することです。このため、AJAX を使用してデータをサーバーに投稿する必要があります。とはいえ、更新に困っています。これがビューのコードです（.gspファイル）-

<head>
<script type="text/javascript">
var rad1, rad2, button1, button2;
function add() {
var newP = document.createElement("p");
var input1, input2,
area = document.getElementsByTagName("form")[0];
input1 = document.createElement("input");
input1.type = "text";
input1.placeholder = "street";
input1.id = "address";
newP.appendChild(input1);
input2 = document.createElement("input");
input2.type = "text";
input2.placeholder = "city";
input2.id = "city"
newP.appendChild(input2);
    area.appendChild(newP);
    }
 </script>
 </head>
<body>
<form name='prop' method="post" action="save">
<g:hiddenField name="owners.id"  value="${session.user.id }" /> 
<input type="button"  value="+Add" onclick= "add();" ><br>
<input type="button" name="create" id="save_button" class="save" value="save" />
</form>
<script type="text/javascript" src="ajax.js"></script>
</body>

別の ajax.js ファイルでの私の Ajax コードは次のようになります。

$('#save_button').click(function()  {
var street = $('#address').val();
var city = $('#city').val();

$.ajax({
    type: "POST",
    url: "${createLink(controller: 'property', action: 'save')}",
    data: { address: street, city: city },
    success: function(data) {
        alert(data);
    }
});


});

そして、これが私のプロパティコントローラーのコードです（アクションを保存）-

def save = {


    def propertyInstance = new Property(params)


    if (propertyInstance.save(flush: true)) {
        flash.message = "Property successfully added."
        redirect(controller:"user", action: "show", id:params.owners.id) 
    }
    else {
        render(view: "create", model: [propertyInstance: propertyInstance, id:params.owners.id])
    }
}

ここで何が間違っていますか？私は Ajax にまったく詳しくないので、明らかな間違いでしたら申し訳ありません..助けてください。

4

1 に答える 1

0

$('#address').val();そして、jQueryが$('#city').val();最初に見つけた値#addressまたは要素の値を取得します。#cityたとえば、次のようにできる場合は、すべての住所と都市の値の配列を作成する必要があります。

var cities = [];
var addresses = [];

$('#address​​​​').each(function() { 
    addresses.push($(this).val());
});​

$('#cities​​​​').each(function() { 
    cities.push($(this).val());
});​

ページに住所と都市の入力が2つある場合、結果は次のようになります。

console.log(addresses); // [address1, address2]
console.log(cities); // [city1, city2]

編集：送信時にフィールドをリセット（またはjQueryセレクターを変更した場合は「追加」）するには、次のようにします。

$('#save_button').click(function() {
    // ... all your regular ajax stuff ...

    // reset the fields
    $('#address').val('');
    $('#city').val('');
    // ... and so on until you reset all fields
});
于 2012-07-14T15:07:38.853 に答える