谁能帮我写一个点击按钮后提示正在加载，然后js get json返回的数据。插入指定DIV中

谁能帮我写一个点击按钮后提示正在加载，然后js get json返回的数据（本服务器，没有跨域）。然后把内容分别插入到load DIV中
。我自己找了好多试了都没有效果，没有办法才来发帖子的。在此先感谢了

<div id="load">正在加载...</div>

返回格式如下，

 {"ok":true,"ww":"yybb","text":"爱我中国"}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title> 页面名称 </title>
</head>
<body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<input type="button" value="加载" onclick="loadjson();" />
<div id="load" style="display: none;">正在加载...</div>

<script type="text/javascript">
function loadjson() {
    $("#load").show();
    $.ajax({
        url: "url.json",
        type: "get",
        dataType: "json",
        success: function (data) {
            $("#load").text(data.text);
        },
        error: function (jqXHR, status, thrown) {
            alert(thrown);
        }
    });
}

</script>
</body>
</html>

<!DOCTYPE html>

loading demo

src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous">
 $(document).ready(function () { $('#submit').click(function () { $.ajax({ //获取数据的url url: 'data.json', beforeSend: function () { //弹出遮挡层 $('#mloading-div').addClass('active'); }, success: function (data) { //移除遮挡层 $('#mloading-div').removeClass('active'); //结果数据插入div中 $('#result-display').html(data.text); } }); }) });

submit

正在加载...

页面代码

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>loading demo</title>
    <link href="loading.css" rel="stylesheet" type="text/css"/>
    <script
            src="https://code.jquery.com/jquery-1.12.4.js"
            integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
            crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#submit').click(function () {
                $.ajax({
                    //获取数据的url
                    url: 'data.json',
                    beforeSend: function () {
                        //弹出遮挡层
                        $('#mloading-div').addClass('active');
                    },
                    success: function (data) {
                        //移除遮挡层
                        $('#mloading-div').removeClass('active');
                        //结果数据插入div中
                        $('#result-display').html(data.text);
                    }
                });
            })
        });
    </script>
</head>
<body>
<div>
    <button id="submit">submit</button>
</div>
<!-- 结果数据展示层 -->
<div id="result-display"></div>

<!--加载提示层 -->
<div id="mloading-div" class="mloading mloading-full mloading-mask">
    <div class="mloading-body">
        <div class="mloading-bar">
            <span class="mloading-text">正在加载...</span>
        </div>
    </div>
</div>
</body>
</html>

loading.css

 .mloading-container {
    position: relative;
    min-height: 70px;
    -webkit-transition: height 0.6s ease-in-out;
    -o-transition: height 0.6s ease-in-out;
    transition: height 0.6s ease-in-out;
}
.mloading {
    position: absolute;
    background: #E9E9E8;
    font: normal 12px/22px "Microsoft Yahei", "微软雅黑", "宋体";
    display: none;
    z-index: 1600;
    background: rgba(233, 233, 232, 0);
}
.mloading.active {
    display: block;
}
.mloading.mloading-mask {
    background: rgba(233, 233, 232, 0.75);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
}
.mloading-full {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.mloading-container > .mloading {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.mloading-body {
    width: 100%;
    height: 100%;
    position: relative;
}
.mloading-bar {
    width: 250px;
    min-height: 22px;
    text-align: center;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.27);
    border-radius: 7px;
    padding: 20px 15px;
    font-size: 14px;
    color: #999;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -140px;
    margin-top: -30px;
    word-break: break-all;
}
@media (max-width: 300px) {
    .mloading-bar {
        width: 62px;
        height: 56px;
        margin-left: -30px !important;
        margin-top: -30px !important;
        padding: 0;
        line-height: 56px;
    }
    .mloading-bar > .mloading-text {
        display: none;
    }
}
.mloading-bar-sm {
    width: 62px;
    height: 56px;
    margin-left: -30px !important;
    margin-top: -30px !important;
    padding: 0;
    line-height: 56px;
}
.mloading-bar-sm > .mloading-text {
    display: none;
}

<!doctype html>

页面名称

正在加载...