Question

方案

我正在编写一个Web应用程序，我的情况下是MVC，我需要使用get请求的响应更新特定容器，有时我想过滤元素并从响应中找到一个元素放在原始容器。

我该怎么做？

Answer 1

当我需要异步部分更新我的内容时，我正在构建一个Web应用程序

所以我想出了一个可能也适合你需要的功能。

基本上它会对提供的url执行get请求，它有标准的jQuery回调：onSuccess，onError和onComplete，你可以使用filter（）和find（）在结果上以及指定容器以将响应放入。

假设您的页面上有此内容：

<div id="myContentWrapper">
    <div class="myContent">
        <h1>This is the content I want to update.</h1>
    </div>
</div>

请求的响应返回：

<html>
    <!-- some html -->
    <div id="filterId">
        <div class="findClass">
            <h1>This is the content I want to inject!</h1>
        </div>
    </div>
    <!-- some more html -->
</html>

现在您可以更新它，将功能连接到myButton点击事件：

$("#myButton").click(function () {
    loadContent("/Controller/Action", //url
    "#filterId", ".findClass", //filter & find
    "div#myContentWrapper div.myContent", //container to update
    function () { //success callback
        alert('Success!');
    }, function () { //error callback
        alert('Error :(');
    }, function () { //complete callback
        alert('Complete');
    });
});

很简单，现在该功能将为您完成剩下的工作：

function loadContent(url, filter, find, container, 
                     onSuccess, onError, onComplete) {
    var htmlResult;
    $.ajax({
        url: url,
        type: "GET",
        success: function (data) {
            htmlResult = data;
            if (onSuccess && typeof onSuccess == "function") {
                onSuccess.call(this);
            }
        },
        error: function () {
            htmlResult = "<h1>An error occurred!</h1>";
            if (onError && typeof onError == "function") {
                onError.call(this);
            }
        },
        complete: function () {
            if (filter != null) {
                if (find != null) {
                    $(container).html(
                        $(htmlResult).filter(filter).find(find).html());
                } else {
                    $(container).html($(htmlResult).find(find).html());
                }
            } else {
                $(container).html(htmlResult);
            }
            if (onComplete && typeof onComplete == "function") {
                onComplete.call(this);
            }}});}

也许您不想在响应中过滤或查找内容，因此您可以这样做：

loadContent("/Controller/Action", null, null, 
"div#myContentWrapper div.myContent", 
function() {
    alert('Success!');
}, function () {
    alert('Error :(');
}, function () {
    alert('Complete');
    });

或者您可能不需要任何回调：

//This is the basic function call, these parameters are required
loadContent("/Controller/Action", null, null, 
    "div#myContentWrapper div.myContent", 
    null, null, null);

你去了，现在你可以轻松地异步更新你想要的任何内容，随时根据需要调整它，你也可以使用请求类型参数，这样你可以GET或POST，甚至添加loading图像容器的ID，这样您就可以在输入函数时将其显示出来并将其隐藏在$ .ajax的完整回调中。

如何使用javascript更新我的内容异步？

1 个答案: