javascript - Grails ajax jquery 不工作

Question

我正在尝试在我的 grails 应用程序中执行 jquery Ajax 表单提交。但它没有将结果保存到数据库中。我正在使用动态表单字段，用户可以在其中添加或删除任意数量的文本字段。

<script>
  $(document).ready(function() {
  $("#add").click(function() {
    var intId = $("#buildyourform div").length + 1;
    var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field" + intId + "\" id=\"field" + intId + "\"/>");
    var fName = $("<input type=\"text\" name=\"name" + intId + "\" class=\"fieldname\" id=\"tb"+ intId +"_1\"/>");
    var lname = $("<input type=\"text\" name=\"email" + intId + "\" class=\"lastname\" id=\"tb"+ intId +"_2\"/>");
    var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
    removeButton.click(function() {
        $(this).parent().remove();
    });
    fieldWrapper.append(fName);
    fieldWrapper.append(lname);
    fieldWrapper.append(removeButton);
    $("#buildyourform").append(fieldWrapper);

}); 

});

</script>

<form action="#" id="input_form">
   <fieldset id="buildyourform">
      <legend>Build your own form!</legend>
   </fieldset> <input type="submit" value="send" name="submit" />
</form>

<input type="button" value="Add a field" class="add" id="add" />

<p id="result"></p>

因此 jquery 将根据“添加字段”按钮的 onclick 函数添加文本字段的数量。

现在我正尝试使用 jquery Ajax 调用提交我的表单。像这样..

<script type="text/javascript">
     $(document).ready(function(){
         $("#input_form").submit(function(){
             var querystring = $(this).serialize();

             $.ajax({
                    url : "/peeldemo/customer/saveparams",
                    data : "data=" + querystring,
                    success : function(data) {
                        alert("Submit Successfully !!");
                        $('#result').html(data);
                        return false;
                    }
             })

             });
    });
</script>

这是我的 Controller ——

    def saveparams() {

    def paramToAddList = params.data
    String[] pramsToAdd = paramToAddList.split("&")
    int addParamsSize = pramsToAdd.size()
    if (addParamsSize) {
        //List<Parameter> paramListToDelete = new ArrayList<Parameter>()
        for(int i=0;i<addParamsSize;i++){
            def customer = new Customer();
            customer.name = pramsToAdd[i].name
            customer.email = pramsToAdd[i].email
            customer.save()

        }
    }
    }

但是我的表单在点击提交按钮后无法提交。

Answer 1

我复制你的代码并测试它

name3:c, data:name1=a, name2:b, email1:1, email2:2, email3:3, action:saveparams,

这是我在 Action 中得到的参数，这里的数据只是name1=a。我添加了三个条目。

出现如下错误

No such property: name for class: java.lang.String. Stacktrace follows: Message: No such property: name for class: java.lang.String

所以我修改你的代码让它工作

<script>
    $(document).ready(function() {
        $("#add").click(function() {
            var intId = $("#buildyourform div").length;
            var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field" + intId + "\" id=\"field" + intId + "\"/>");
            var fName = $("<input type=\"text\" name=\"name\" class=\"fieldname\" id=\"tb"+ intId +"_1\"/>");
            var lname = $("<input type=\"text\" name=\"email\" class=\"lastname\" id=\"tb"+ intId +"_2\"/>");
            var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
            removeButton.click(function() {
                $(this).parent().remove();
            });
            fieldWrapper.append(fName);
            fieldWrapper.append(lname);
            fieldWrapper.append(removeButton);
            $("#buildyourform").append(fieldWrapper);

        });

    });

</script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#input_form").submit(function(){
            var querystring = $("#input_form").serialize();

            $.ajax({
                url : "/admin/saveparams",
                data : querystring,
                success : function(data) {
                    alert("Submit Successfully !!");
                    $('#result').html(data);
                    return false;
                }
            })
            return false;
        });
    });
</script>

<form action="#" id="input_form">
    <fieldset id="buildyourform">
        <legend>Build your own form!</legend>
    </fieldset> <input type="submit" value="send" id="asdasd" name="submit" />
</form>

<input type="button" value="Add a field" class="add" id="add" />

<p id="result"></p>

这是我的 Action

def saveparams() {
    def paramToAddList = params.list('name')
    def paramToAddList1 = params.list('email')

    println "----------------1----${paramToAddList}"
    println "----------------11----${paramToAddList1}"

    if (paramToAddList) {
        for (int i = 0; i < paramToAddList.size(); i++) {
            println "-----------------------${paramToAddList[i]}---${paramToAddList1[i]}---"
        }
    }
    render params
}