ajax动态加载json数据并解析

最新推荐文章于 2024-05-16 13:55:28 发布

MQ-HZ

最新推荐文章于 2024-05-16 13:55:28 发布

阅读量4.2k

点赞数

分类专栏： java面向接口文章标签： ajax json

本文链接：https://blog.csdn.net/qq_33647275/article/details/52594408

版权

java面向接口专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果图

这里写图片描述

jsp代码

<form >
            姓名：<input name="name" type="text"/>
            年龄：<input name="age" type="text"/>
            <input type="button" class="get" value="get提交"/>
            <input type="button"  class="post" value="post提交"/>
            <input type="button" class="ajax" value="ajax提交"/>
            </form>
            <div id="box"></div>

servlet代码

//get
public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        if (name == null || name == "") {
            name = "测试名字admin";
        }

        if (age == null || age == "") {
            age = "测试年龄100";
        }
        user user = new user(1, name, age);
        PrintWriter out = response.getWriter();

        JSONObject jsonObj = JSONObject.fromObject(user);

        out.print(jsonObj);

        out.flush();
        out.close();
    }

//post
public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        // response.setContentType("text/html");

        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String name = request.getParameter("name");
        if (name == null || name == "") {
            name = "测试名字admin";
        }
        String age = request.getParameter("age");
        if (age == null || age == "") {
            age = "测试年龄100";
        }
        user user = new user(1, name, age);
        PrintWriter out = response.getWriter();

        JSONObject jsonObj = JSONObject.fromObject(user);

        out.print(jsonObj);

        out.flush();
        out.close();
    }

JS核心代码

<script type="text/javascript">
        //get
    $(document).ready(function() {
        $('form .get').click(function() {
         $.get('ajaxServlet',function(response,status,xhr){
             var dataObj = eval("(" + response + ")");
             $("#box").html(response);
             alert(dataObj.name);

        });

    });
    //post
    $('form .post').click(function() {
         $.post('ajaxServlet',function(response,status,xhr){
             var dataObj = eval("(" + response + ")");
             $("#box").html(response);

        });

    });
    //ajax
    $('form .ajax').click(function() {
        alert($("[name='name']").val());
             $.ajax({
             type:'get',
             url:'ajaxServlet',
             data:{
             name:$("[name='name']").val(),
             age:$("[name='age']").val()
             },
             success:function(response, status, xhr){
             $("#box").html(response);}
             });

    });

    });

</script>