解决easyUI跨域问题

最新推荐文章于 2021-08-05 14:31:27 发布

程序员青戈

最新推荐文章于 2021-08-05 14:31:27 发布

阅读量5.2k

点赞数

文章标签： easyui jsonp

本文链接：https://blog.csdn.net/xqnode/article/details/71941464

版权

easyUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

easyUI解决jsonp跨域问题

html代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js渲染表格</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>
    <script src="myScript.js"></script>
</head>
<body>
    <table id="dg" class="easyui-datagrid"></table>
</body>
</html>

js代码：

$(function () {
    $("#dg").datagrid({
        loader:function(param,success,error){
            //跨域请求数据
            $.ajax({
                async:false,
                url:"http://192.168.1.106:8080/easyUI/db.php",
                type:"get",
                dataType:"jsonp",
                jsonp:"callback",
                jsonpCallback:"callback",
                success: function (res) {
                    success(res);
                },
                error: function (xhr) {
                    error(xhr.responseText);
                }
            })
        },
        width:400,
        title:"用户列表",
        iconCls:"icon-search",
        //两个数组是为了合并单元格
        columns:[[
            {title:"姓名",field:"name"},
            {title:"年龄",field:"age"},
            {title:"邮箱",field:"email"}
        ]]

    })
})

在loader函数里，可以使用ajax获取数据，将数据传给success函数渲染到表格上。

数据格式：

显示结果：
用户列表

程序员青戈

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
解决easyUI跨域问题

easyUI解决jsonp跨域问题html代码：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>js渲染表格</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
复制链接

扫一扫