Question

我使用原型处理页面，我必须添加一些ajax请求，它们更新一个指定div的内容。我在jquery中如何做到这一点：

$j.ajax({
    url: url,
    success: function (result) {
        var resultDiv = $j(result).find('.SOME-CLASS');
        $j('.SOME-CLASS').html(resultDiv.html());
    }
});

我试着用最后几个小时的原型得到相同的结果，最后我放弃了。它会如何看待原型？使用类SOME-CLASS从结果div中退出并将其内容替换为具有相同类的文档div中的内容非常重要。

PS。我想过解析从原型请求中获取的原始结果字符串来获取内容，然后用现有的文档替换已创建的内容，但在我看来这是一个糟糕的，不优雅的解决方案。有更好的吗？我听说原型是DOM操作的好工具。

Answer 1

new Ajax.Request(url, {
    onSuccess: function(response) {
        var html = new Element('div');
        html.update(response.responseText);
        // There may be many .SOME-CLASS so use `invoke` to iterate through them
        $$('.SOME-CLASS').invoke('update', html.select('.SOME-CLASS').first());
    }
});

Prototype没有等同于jQuery的$(htmlString)快捷方式，所以你必须将HTML字符串分配给新创建的元素然后提取子类（这就是jQuery在幕后的工作方式））。临时元素永远不会添加到DOM中，因此不会直接看到。

当通过它的类搜索传入元素时，我们必须使用返回数组的Element.select。如果我们假设只有一个匹配，或者只对一个匹配感兴趣，则使用该数组的第一个元素。也许这不是你想要的，并且意味着从响应中收集多个元素。这是因使用类名而不是ID而引起的歧义。

这是a demonstration fiddle。

Answer 2

基本上，如果你有这个：

<form id='myForm'>
.... fields ....
<input type='submit' value='Go'>
</form>
<div id='result'></div>

你的js会或多或少：

Event.observe('myForm', 'submit', function(event) {
    $('myForm').request({
        onFailure: function() { .... },
        onSuccess: function(t) {
            $('result').update(t.responseText);
        }
    });
    Event.stop(event); // stop the form from submitting
});

Answer 3

使用原型成功ajax响应更新指定div的内容：

var container = $$(".yourdiv")[0]; //div class as it returns array so we used the index
container.update(response.responseText);

我已对此进行了测试，效果非常好。

使用prototype和ajax更新页面的一部分

3 个答案: