JQueryでの$ .getScript()メソッドと$ .getJSON()メソッドの使用

1. $ .getScript()メソッドの使用

ページが最初に読み込まれるときに必要なすべてのJavaScriptファイルを取得する必要がまったくない場合があります。どのJavaScriptファイルが必要な場合でも<script>タグを動的に作成できますが、JQueryコードは次のとおりです。

$(document.createElement("script")).attr("src","/js/test.js").appendTo("head");

または:

$("<script type='text/javascript' src='/js/test.js' />").appendTo("head");

しかし、このアプローチは理想的ではありません。このため、JQueryは.jsファイルを直接ロードするための$ .getScript()メソッドを提供します。これはHTMLフラグメントをロードするのと同じくらい簡単で便利であり、JavaScriptファイルを処理する必要はありません。JavaScriptファイルは自動的に実行されます。 。JQueryコードは次のとおりです。

$.getScript("/js/test.js",function(){
    //回调函数(非必须)
});

【例】 JQueryの$ .getScript()メソッドを使用して.jsファイルを読み込み、.jsファイルでメソッドを実行します。

(1)jsディレクトリにtest.jsというスクリプトファイルを作成し、実行メソッドを記述します。

//获取用户名称
function getUserName()
{
    alert("您好,欢迎访问 pan_junbiao的博客");
}

(2)JQueryの$ .getScript()メソッドを使用してtest.jsファイルをロードし、コールバック関数を使用してスクリプトの実行メソッドを呼び出します。

$(document).ready(function() {
    $.getScript("/js/test.js",function(){
        getUserName();
    });
});

結果:

 

2. $ .getJSON()メソッドの使用

$ .getJSON()メソッドはJSONファイルをロードするために使用され、使用法は$ .getScript()メソッドと同じです。

JQueryコードは次のとおりです。

$.getJSON(url, function(data){
    //回调函数
});

[例] JQueryの$ .getJSON()メソッドを使用して、バックグラウンドメソッドを呼び出し、ユーザーリストを取得し、ユーザーリストをトラバースします。

(1)ユーザー情報コントローラー(Controller)を作成し、ユーザーリストを取得するメソッドを記述します。

/**
 * 用户信息控制器
 * @author pan_junbiao
 **/
@Controller
@RequestMapping("user")
public class UserController
{
    /**
     * 获取用户列表
     */
    @ResponseBody
    @RequestMapping("getUserList")
    public List<UserInfo> getUserList()
    {
        //创建用户列表
        List<UserInfo> userInfoList = new ArrayList<>();
        userInfoList.add(new UserInfo(1, "pan_junbiao的博客", "您好,欢迎访问 pan_junbiao的博客"));
        userInfoList.add(new UserInfo(2, "pan_junbiao的博客", "https://blog.csdn.net/pan_junbiao"));
        userInfoList.add(new UserInfo(3, "pan_junbiao的博客", "您好,欢迎访问 pan_junbiao的博客"));
        userInfoList.add(new UserInfo(4, "pan_junbiao的博客", "https://blog.csdn.net/pan_junbiao"));
        userInfoList.add(new UserInfo(5, "pan_junbiao的博客", "您好,欢迎访问 pan_junbiao的博客"));
        //返回结果
        return userInfoList;
    }
}

(2)ユーザーリスト情報を表示する表示ページ(表示)を作成します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery中的$.getJSON()方法的使用</title>
    <meta name="author" content="pan_junbiao的博客">
</head>
<body>
<input type="button" value="获取用户信息" id="btnGetUser"/>
<div id="content" style="margin-top: 10px;"></div>
</body>
<script src="/js/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function() {
        $("#btnGetUser").click(function(){
            $.getJSON("/user/getUserList", function(data){
                $("#content").empty();
 
                var html = "";
 
                //使用$.each()函数,遍历数据
                $.each(data,function(index,item)
                {
                    html += " 索引:" + index;
                    html += " 用户编号:" + item.userId;
                    html += " 用户名称:" + item.userName;
                    html += " 博客信息:" + item.remark;
                    html += "<br>";
                });
 
                $("#content").html(html);
            });
        });
    });
</script>
</html>

結果:

 

おすすめ

転載: blog.csdn.net/pan_junbiao/article/details/107693305