jQuery使用getJSON方法获取

最新推荐文章于 2026-06-05 10:14:50 发布

原创最新推荐文章于 2026-06-05 10:14:50 发布 · 10w+ 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

本文章博主原创，希望对你有所帮助。

收录于

HTML

本文深入解析了jQuery中三种常用的AJAX方法：getJSON(), get() 和 post() 的使用方法及应用场景，详细介绍了如何通过这些方法从服务器获取或发送数据，并展示了具体的代码示例。

public ActionResult selectInfor()//查找员工信息
        {

            var employee = (from tbEmp in myUserEntities.SYS_Employee
                            select new
                            {
                                tbEmp.EmployeeID,//员工ID
                                tbEmp.EmployeeCode,//员工编码
                                tbEmp.EmployeeName//员工姓名
                            }).ToList();
            return Json(employee, JsonRequestBehavior.AllowGet);
        }

<body>
    <div class="container">
        <button class="btn btn-primary" id="btnGetJson">$.getJSON()</button>
        <button class="btn btn-primary" id="btnGet">$.get()</button>
        <button class="btn btn-primary" id="btnPost">$.post()</button> 
        <div class="divContent row" id="result">
            <!--这是存放通过jQuery方法获取的值-->
        </div>
    </div>
    <script src="~/Content/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            var str;
            //jQuery.getJSON()的异步加载
            /*
                语法：jQuery.getJSON(url, [data], [callback])
                描述：通过 HTTP GET 请求载入 JSON 数据。
                参数说明：
                    url:发送请求地址。
                    data:待发送 Key/value 参数。
                    callback:载入成功时回调函数。
            */
            $("#btnGetJson").click(function () {
                $.getJSON("/jQueryAjax/selectInfor",
                    function (data) {
                    //console.log(data);
                    //console.log(typeof (data));
                    $.each(data, function (i) {
                        str += "员工ID：" + data[i].EmployeeID + "  员工编码：" + data[i].EmployeeCode + "  员工姓名：" + data[i].EmployeeName + "<br/>";
                        $("#result").html(str);
                    });
                });
            });
            //jQuery.get()以GET方式从服务器获取数据
            /*
                语法：jQuery.get(url, [data], [callback], [type])
                描述：通过远程 HTTP GET 请求载入信息。
                    这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
                参数说明：
                    url:待载入页面的URL地址
                    data:待发送 Key/value 参数。
                    callback:载入成功时回调函数。
                    type:返回内容格式，xml, html, script, json, text, _default。
            */
            $("#btnGet").click(function () {
                $.get("/jQueryAjax/selectInfor", function (data) {
                    console.log(data);
                    console.log(typeof (data));
                    $.each(data, function (i) {
                        str += "员工ID：" + data[i].EmployeeID + "  员工编码：" + data[i].EmployeeCode + "  员工姓名：" + data[i].EmployeeName + "<br/>";
                        $("#result").html(str);
                    });
                });
            });
            //jQuery.post()以POST方式从服务器发送数据
            /*
                语法：jQuery.post(url, [data], [callback], [type])
                描述：通过远程 HTTP POST 请求载入信息。
                    这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
                参数说明：
                    url:发送请求地址。
                    data:待发送 Key/value 参数。
                    callback:发送成功时回调函数。
                    type:返回内容格式，xml, html, script, json, text, _default。
            */
            $("#btnPost").click(function () {
                $.post("/jQueryAjax/selectInfor", function (data) {
                    console.log(data);
                    console.log(typeof (data));
                    $.each(data, function (i) {
                        str += "员工ID：" + data[i].EmployeeID + "员工编码：" + data[i].EmployeeCode + "员工姓名：" + data[i].EmployeeName + "<br/>";
                        $("#result").html(str);
                    });
                });
            });
        })
    </script>
</body>