使用ajax和grails更新SQL数据库

updating SQL database using ajax and grails

本文关键字：SQL 数据库 更新 grails ajax 使用      更新时间：2023-09-26

我正在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代码在一个单独的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一点也不熟悉，如果这是一个明显的错误，我很抱歉。。请帮忙。

$('#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
});
相关文章：