Question

我已经设置了搜索功能，可以在XSLT文件中搜索。这完美无缺，但我在使用ajax动态返回搜索结果时遇到了一些麻烦。

这是我的JS：

 var SearchHandler = function(frm) {

        frm = $(frm);
        var data = frm.find(".search-field").val();

        $.ajax({ 
            method: 'GET',
            url: '/',
            data: { query: data },
            dataType: 'xml',
            success: SearchSuccessHandler,
            error: SearchSuccessHandler
        });

    };

    var SearchSuccessHandler = function(html) {


    };

我想要的是SearchSuccessHandler从index.php动态加载搜索结果？query = searchword

我似乎无法找到正确的方法来处理它。

Answer 1

根据您的评论：

Bah ..抱歉... ajax调用将返回一些基于的新html 查询...我想要替换现有的html我已经尝试过了 $('body').html(html.responseText); 然后我再也无法搜索了因为javascript未正确加载

这不是AJAX的问题，而是事件委托

将函数直接绑定到元素时：

$('.my-element').on('whatever', function() { ... })

只要元素存在，处理程序就会正常工作然而如果你替换 整个正文的内容你会遇到麻烦因为原始 .my-element已不复存在。

您可以通过使用事件委派来确保您的功能继续搜索，例如

$(body).on('whatever', '.my-element', function() { ... })

这基本上说：“如果我点击正文并且目标是.my-element，那么执行此功能” 而不是一个直接绑定的处理程序，它说：“如果我点击此特定元素上的，则执行此功能”

body将永远存在，因此你总是可以从身体委托下来，但是如果你可以在一些更具体的元素上做到这一点显然会更好，从那以后你将不会有整个身体的onclick处理程序。

我认为这是你的问题所在，因为你正在更换整个身体。

Answer 2

试试这个

success:function(data) {
// do your stuff here
}

当然，您需要确保您的函数返回一些值。为了使您更容易，请在index.php上将值编码为json

return json_encode($values)

然后，在你的成功函数中，只需用eval（）

解析它

ajax加载搜索结果

2 个答案: