使用ajax和grails更新SQL數據庫

我正在使用springource工具套件中的grails，並且面臨更新SQL數據庫的問題。在頁面中，要求用戶輸入他的財產，地址，城市等的詳細信息，並且一旦點擊按鈕'保存'，細節就需要被保存在數據庫中。現在我需要做的是，動態地將輸入字段（地址，城市等）添加到頁面，每次用戶點擊按鈕「添加」。因此，我需要使用AJAX將數據發佈到服務器。但是，我無法更新它。下面是這個視圖（.gsp文件）的代碼 -使用ajax和grails更新SQL數據庫

<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代碼看起來像一個單獨的文件 - ajax.js

$('#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，所以很抱歉，如果它是一個明顯的錯誤，請幫助。

來源

2012-07-14 niharika

$('#address').val();和$('#city').val();會得到jQuery找到的第一個#address或#city元素的值。如果你想，讓我們說，一個數組的所有地址和城市價值提供，你可以這樣做：

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

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

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

如果頁面上有兩個地址和城市的投入，結果會是這個樣子：

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-14 15:07:38 theabraham

我想用戶輸入一組輸入（地址和城市），然後點擊保存和th在更新到數據庫。然後點擊'添加'，另一組元素將出現在頁面上，通過函數調用add（），然後再次重複。那麼陣列是否需要？ – niharika 2012-07-14 15:14:07

我不明白爲什麼當我運行應用程序時，點擊'保存'按鈕什麼也不做。我錯過了什麼？ – niharika 2012-07-14 15:19:53

我明白了，我想你想允許添加任意數量的地址。您是否嘗試按下「添加」按鈕時重置所有字段的值？另外，你的JavaScript甚至會將它提交給Ajax請求嗎？我推薦使用'console.log（）'或'alert（）'來查看腳本是否停止工作。 – theabraham 2012-07-14 15:24:28

使用ajax和grails更新SQL數據庫

回答

相關問題