代码之家 › 专栏 › 技术社区 › bsr

来自呈现为ajax响应的表单的ajax调用(jquery+grails:链接ajax请求)

grails ajax jquery

bsr · 技术社区 · 15 年前

我原以为下面的场景很常见,但在网上找不到太多帮助。我有一个通过ajax加载的表单(比如,创建实体表单)。它通过按钮点击(加载)事件加载

$("#bt-create").click(function(){
                     $ ('#pid').load('/controller/vehicleModel/create3');
                    return false;
                    });

响应(表单)被写入pid元素。表单的名称和id是ajax表单,submit事件附加到ajax post请求

$(function() {
             $("#ajax-form").submit(function(){
                // do something...
                 var url = "/app/controller/save"
         $.post(url, $(this).serialize(), function(data) {
            alert( data ) ; /// alert data from server
          });

我可以单独进行上面的ajax操作。如果从静态html文件调用,则ajax post操作成功。但如果我链接请求(在完成第一个请求之后),以便它从第一个请求生成的输出表单调用,则不会发生任何事情。我可以看到post方法是通过firebug调用的。有没有更好的方法来处理以上的流量?

还有一件有趣的事我注意到了。如您所见,我使用grails作为平台。如果我将javascripts保存在main.gsp(master layout)中,提交事件将不会注册,因为在firebug中不会命中断点。但是,如果我在模板文件(呈现上面的表单)中定义javascript,则会命中断点,但正如我所解释的,操作不会在控制器上调用。我将javascript更改为head部分,但结果相同。

非常感谢您的帮助。谢谢, Babu。

2 回复 | 直到 15 年前

Darin Dimitrov 15 年前

您需要在第一个ajax请求的成功处理程序中注册表单提交处理程序:

$("#bt-create").click(function() {
    $('#pid').load('/controller/vehicleModel/create3', function() {
        $("#ajax-form").submit(function() {
            // do something...
            var url = "/app/controller/save"
            $.post(url, $(this).serialize(), function(data) {
                alert( data ) ; /// alert data from server
        });
    });
    return false;
});

我也建议你使用 jQuery form plugin . 您的代码将如下所示:

$('#bt-create').click(function() {
    $('#pid').load('/controller/vehicleModel/create3', function() {
        $('#ajax-form').ajaxForm(function() {
            alert('thanks for submitting');
        });
    });
    return false;
});

无需获取表单URL、序列化参数等…

bsr 15 年前

jquery表单插件帮助我缩短了代码,并且似乎有更多的选项(callbacks)用于更好的控制。但是,达林建议的代码也很有效。对于阅读这篇文章的人,回答我问题的第二部分。$(document).ready()仅在文档最初加载后激发。如果要绑定在之后生成或包含的事件dom元素,可以使用.live(1.3版以上)绑定事件。参见文档 http://api.jquery.com/live/ 谢谢。