jQuery使用ajax .load() 技術

Posted on 2014-11-28 Edited on 2023-11-24 In jQuery Views: Disqus:

.load()方法

syntax:$(selector).load(URL string [,data PlainObject][,complete function])

1、一個使用ajax技術的load()範例

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").load("http://www.w3schools.com/jquery/demo_test.txt");
            });
        });
    </script>
</head>
<body>

    <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
    <button>Get External Content</button>

</body>
</html>

demo_test.txt的內容為

<h2>jQuery and AJAX is FUN!</h2>
<p id="p1">This is some text in a paragraph.</p>

根據所load到的文字來替換#div1裡的內容

load前

load後

注意：

(1)、使用load()方法時，該範例不可以在線上工具(如JS Bin)或是本機檔案路徑(如file:///)或是外網做測試，

由於load()是一種Ajax post技術，而現在瀏灠器已規範凡是使用Ajax post技術都必須只能在內網執行，

如去讀取http://www.w3schools.com網域底下的資料時，則該執行網頁也必須被架在同http://www.w3schools.com網域底下才行，

否則會出現「No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.」錯誤。

2、於txt檔裡面取指定tag

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").load("demo_test.txt #p1");
            });
        });
    </script>
</head>
<body>

    <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
    <button>Get External Content</button>

</body>
</html>

這次load method的URL參數後還加了一個"#p1"，代表只取回傳資料id為p1的文字。

<p id="p1">This is some text in a paragraph.</p>

3、使用complete function

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").load("demo_test.txt", function (responseTxt, statusTxt, xhr) {
                    if (statusTxt == "success")
                        alert("External content loaded successfully!");
                    if (statusTxt == "error")
                        alert("Error: " + xhr.status + ": " + xhr.statusText);
                });
            });
        });
    </script>
</head>
<body>

    <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
    <button>Get External Content</button>

</body>
</html>

說明：

(1)、語法data PlainObject可以省略，變成

syntax:$(selector).load(URL string [,complete function])

(2)、當load方法成功執行後，則會再執行complete function。

此次加了function (responseTxt, statusTxt, xhr)

此function的意思為準備responseTxt,、statusTxt、xhr三個參數，

在function內使用xhr.status、xhr.statusText、statusTxt。

相關參數說明如下

(a)、responseTxt - contains the resulting content if the call succeeds

(b)、statusTxt - contains the status of the call

(c)、xhr - contains the XMLHttpRequest object

4、MVC範例-使用load技術

Index.cshtml

@{
    ViewBag.Title = "Home Page";
}

<p>using ajax</p>

@Html.ActionLink("show the Privacy", "PrivacyPolicy", null, new { id = "privacyLink" })

<div id="privacy"></div>

@section scripts{
    <script src="~/Scripts/AjaxDemo.js">
    </script>
}

_PrivacyPolicy.cshtml

<p>this is Privacy Policy</p>

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AjaxLoad.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult PrivacyPolicy()
        {
            if (Request.IsAjaxRequest())
            {
                return PartialView("_PrivacyPolicy");
            }
            return View("_PrivacyPolicy");
        }
    }
}

AjaxDemo.js


$(document).ready(
    function myfunction() {
        $("#privacyLink").click(function (event) {
            event.preventDefault();
            var url = $(this).attr('href');
            $('#privacy').load(url);
        });
});