Question

我有这个用PHP / JavaScript开发的小标签系统。

对于表单提交，我将JQuery函数绑定到'submit'事件，该事件将Ajax查询发送到服务器，避免重新加载页面（并丢失其他选项卡）。我为每个表单编写了一个函数，但意识到它们是相同的（接受输入，发送Ajax查询，显示返回的消息）所以我决定使用定义每个表单的参数创建一个通用的jquery函数。） p>

我有这个功能：

function submit_search(entity){
        $('#'+entity.name+'_searchform').submit(function(){
            var url = public_path+entity.name+'/search';
            var key = $('#'+entity.name+'_search_key').val();

            $.ajax({
                type: 'POST',
                url: url,
                data: {search_key: key},
                success: entity.submit_search(result)
            }); 

            return false;
    });
}

其中entity是一个JS对象，其中包含实体名称和我想要执行的成功函数。此函数是在加载主页面时加载一次的脚本中编写的。加载选项卡后，我只需使用实际实体调用submit_search()。

这对我来说似乎合乎逻辑。但它不起作用。问题是jquery无法识别元素，例如，在var key = $('#'+entity.name+'_search_key').val();之后，key为null。

我做错了什么？

Answer 1

您的成功功能将在请求之前执行

  $.ajax({
            type: 'POST',
            url: url,
            data: {search_key: key},
            success: *entity.submit_search(result)*
        })

我认为submit_search不会返回指向函数的指针你需要将指针传递给submit_search

  $.ajax({
            type: 'POST',
            url: url,
            data: {search_key: key},
            success: *entity.submit_search*
        })

关于重新认识元素 - 确保你写了正确的选择器。尝试在浏览器的调试/监视工具中硬编码预期的表现，并检查它是否正常，如

$('#EntityNameValue_search_key').length > 0

Answer 2

如果你真的想以可重复使用的方式抽象所有这些，你可以使用类似的东西：

$(function() {
    $("body").on("submit", "form.ajax", function(event) {
        event.preventDefault();
        var $target = $(event.target);
        var successFunk = $target.attr("data-success") || "success";
        var url = $target.attr("action");
        $.post(url, $target.serializeObject(), {
            success: function(data) {
                window[successFunk](data);
            }
        });
    });
});

serializeObject可在此处获取：http://benalman.com/projects/jquery-misc-plugins/#serializeobject

然后您只需创建一个表单：

<form class="ajax" action="url_i_want_to_post_to" data-success="successCallabck">
  <input type="text" name="search_key"/>
</form>

将{search_key: ${value_of_search_key}}的JSON对象发布到表单的目标，并调用函数successCallback或返回时指定的任何内容。理想情况下，您希望更好地调整回调范围，而不是锁定window。您可以使用注册表，但是否则使用名为FORM_CALLBACKS的对象会使事情井然有序。

Answer 3

不应该这样的工作吗？

$(document).ready(function() {
    $('#search_form').live("submit", function(event) {
        event.preventDefault();
        // do some magic
    });
});

然后你不需要将一些手动函数和jquery代码混合在一起。

表单提交的常规jquery函数

3 个答案: