ajax(二) MVC页面获取内容

获取内容

前置:
AAA.cshtml的内容:

[{user:'李四',pass:'12322'},{user:'张三',pass:1222}]

①对象及请求方式

url: "/Home/AAA",//对象
type: "GET",//GET请求

②解析对象
使用eval()函数对内容解析

var arr = eval(result);//eval解析

③添加内容

var str = '';//空串
for (var i = 0; i < arr.length;i++) {
str +='<li>用户名:<strong>'+arr[i].user+'</strong>密码:<span>'+arr[i].pass+'</span></li>';
}
//console.log(str);
$('#myul').append(str);//添加进列表,不过多点几次会出现重复内容,可以用.html(str)解决

下面是完整代码:

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            $(document).ready(function () {
                $('#btn1').click(function () {//点击的按钮
                    $.ajax({
                        url: "/Home/AAA",//对象
                        type: "GET",//GET请求
                        success: function (result) {
                            var arr = eval(result);//eval解析
                            var str = '';//空串
                            for (var i = 0; i < arr.length;i++) {
                                str +='<li>用户名:<strong>'+arr[i].user+'</strong>   密码:<span>'+arr[i].pass+'</span></li>';
                            }
                            //console.log(str);
                            $('#myul').append(str);//添加进列表
                        }
                    })
                })
            })
        };
    </script>
</head>
<body>
    aaa
    <input id="btn1" type="button" value="读取" />
    <ul id="myul">
        
    </ul>  
</body>
</html>

结果展示:
点击按钮出现:
在这里插入图片描述

发布了53 篇原创文章 · 获赞 18 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/YUEXILIULI/article/details/102534625