使用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数据库

回答

相关问题