0

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

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

我有这个功能：

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 无法识别元素，例如， after var key = $('#'+entity.name+'_search_key').val();， key 为空。

我究竟做错了什么？

4

3 回答 3

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
于 2012-09-28T13:32:58.393 回答
1

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

$(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 is available here: http://benalman.com/projects/jquery-misc-plugins/#serializeobject

Then you'd just create a form like:

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

Which would post a JSON object of {search_key: ${value_of_search_key}} to the form's destination and call the function successCallback or whatever you specify on return. Ideally you'd want to scope your callbacks better instead of latching on to window. You could use a registry, but otherwise using an object named something like FORM_CALLBACKS would keep things organized.

于 2012-09-28T13:40:45.400 回答
0

不应该这样的工作吗？

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

然后，您需要将一些手动功能与 jquery 代码混合使用。

于 2012-09-28T13:24:35.667 回答