如何使用javascript更新我的内容异步？ [英] How to update my content async with javascript?
问题描述
场景
我正在编写一个Web应用程序，我的情况下是MVC，我需要使用响应更新特定容器从get请求中，有时我想过滤元素并从响应中找到放置在原始容器中的元素。
I'm writing a web application, MVC in my case, and I need to update a specific container with the response from a get request, sometimes I want to filter the elements and find an element from the response to place in the original container.
我该怎么办？
推荐答案
当我需要异步部分更新我的内容时，我正在构建一个Web应用程序
所以我想出了一个可能也适合你需要的功能。
So I came up with a function which might suits your needs too.
基本上它会执行一个获取对提供的URL的请求，它具有标准的jQuery回调： onSuccess ， onError 和 onComplete ，你可以对结果进行filter（）和find（），并指定容器来放置响应。
Basically it will perform a get request to the url provided, it has the standard jQuery callbacks: onSuccess, onError and onComplete, and you can filter() and find() on the result as well as specifying the container to place the response into.
假设您的页面上有此内容：
<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 点击事件：
Now you can update it wiring the function to myButton click event:
$("#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，甚至可以添加 lo ading 图像容器的ID，这样当你输入函数并将其隐藏在$ .ajax的完整回调时就可以显示它。
There you go, now you can easily update any content you want asynchronously, feel free to tweak this as needed, also you could use a request type parameter so you can GET or POST, or even adding a loading image container's id so you can display it when you enter the function and hiding it on the complete callback of the $.ajax.
这篇关于如何使用javascript更新我的内容异步？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
