web第18天ajax和json

最新推荐文章于 2020-09-27 20:04:20 发布

就这就这就这就这？

最新推荐文章于 2020-09-27 20:04:20 发布

阅读量413

点赞数

CC 4.0 BY-SA版权

分类专栏： web学习笔记文章标签： ajax json url

本文链接：https://blog.youkuaiyun.com/qq_25596603/article/details/77513438

web学习笔记专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个使用AJAX实现的简单网页示例，通过点击事件触发AJAX请求，并展示了如何在客户端处理从服务器返回的JSON数据。同时，文章还讨论了MVC模式下Web应用的分层开发。

ajax

jsp:页面代码：
$(function(){
    $("#dianji").click(function(){
        var url = "text";
        var post_data="";
        $.post(url,post_data,function(data){
            $("#boy").html(data);
        }); 
})
<body>
<div id="dianji">
    点击
</div>
<div id="boy"></div>
</body>

controller代码：
response.getWriter().print("ajax test");

Json：要导入fastjson-1.2.23.jar这个包

jsp:页面代码：
        var url = "TestJsonServlet";
        var post_data = {"name":"jingshan","age":"18"};
        $.post(url,post_data,function(data){
            //console.log(data)// 查看返回数据
            var json_data = $.parseJSON(data);// 解析返回的json对象
            //console.log(json_data);
            //console.log(json_data[0].age)// 展示 方式2
            for(i in json_data){// 遍历的方式
                console.log(json_data[i].name)
                console.log(json_data[i].age)
            }
        });
    servlet：页面代码：       
        //response.getWriter().print("{'key':'value'}")//阿里json版本
        List<Person> list=new ArrayList<Person>();
        Person p1=new Person("zy", "18");
        list.add(p1);
        Person p2=new Person("zy", "18");
        list.add(p2);
        Person p3=new Person("zy", "18");
        list.add(p3);
        response.getWriter().println(JSON.toJSONString(list));

mvc

ava Web开发有Model 1和Model 2两种模型，Model 1以页面为中心，只适用于非常小型的应用，因此
建议使用Model 2进行应用开发。与此同时，要完成复杂应用程序的开发可以先将应用的功能横向切分为
多个层面，每个层面只承担相对单一的职责，通过上层对下层的调用形成一个完整的系统，这就是分层开
发，而最典型的做法就是将应用分解为表示层、业务层和持久层。

    a. 使用Servlet或Filter作为控制器（Controller）
    b. 使用JavaBean作为模型（Model）
    c. 使用JSP作为视图（View）

这里写图片描述