Ajax前后台交互 返回普通格式和JSON格式

2017-10-20 19:35:08来源:CSDN作者:xpf_user人点击

分享

采用阿里fastJson 下面是pom.xml

        <dependency>            <groupId>com.alibaba</groupId>            <artifactId>fastjson</artifactId>            <version>1.2.9</version>        </dependency>

Ajax返回字符串

    //js前台ajax 注意引入jquery文件 如jquery.min.js等    function testAjax() {        //文本的值        var uname = $("#username").val();        var pwd = $("#password").val();        //alert(pwd)        $.ajax({            type : 'post', //提交方式            url : "../ReturnString.do", //路径            //参数            data : {                 username : uname,                password : pwd            },            cache : false,            //返回普通的字符流不要写 dataType : "json"             success : function(data) {                alert(data);            }        });    }    //html代码  我绑定的是焦点失去事件 所以加了一个测试框    <form action="#" id="myform">        姓名:<input type="text" id="username" name="username" /><br /> 密码:<input            type="text" name="password" id="password" onblur="testAjax()" /> <br />        测试框:<input type="text" /> <br /> ${pageContext.request.contextPath}    </form>    //后台代码 只是功能测试 没有写实际内容    @RequestMapping("/ReturnString") //这是spring框架的注解    public void ReturnString(String username,String password,HttpServletResponse response){        System.out.println(username+password);        try {            //写入out对象流            response.getWriter().println("测试的字符串");        } catch (IOException e) {            e.printStackTrace();        }    }

Ajax返JSON格式

    //前台ajaxfunction ReturnJsonList() {        $.ajax({            type : 'post',            url : '../ReturnJsonList.do',            dataType : "json",            success : function(data) {                alert(data);                //i循环的次数  value对象 id,name等是属性                $.each(data, function(i, value) {                                                      $("#remark").append(                             " <tr><td>" + value.id + "</td><td>"                                    + value.name + "</td><td>" + value.t                                    + "</td><td>" + value.x + "</td></tr>");                 });             }        });    }
    //html代码 测试用的按钮的单击时间 然后返回集合拼接到表格    <input type="button" name="测试返回JSON格式List集合" onclick="ReturnJsonList()" />    <table class="table table-striped" id="remark">        <tr>            <td>学号</td>            <td>姓名</td>            <td>日期</td>            <td>年龄</td>        </tr>    </table>
//后台代码@RequestMapping("/ReturnJsonList")    public void testPrco(HttpServletResponse response){        System.out.println("ok ReturnJsonList");        try {            List<Demo> list = new ArrayList<>();            Demo d1 = new Demo(1,"测试01", 50, new Date());            Demo d2 = new Demo(2,"测试02", 50, new Date());            Demo d3 = new Demo(3,"测试03", 50, new Date());            //日期转换 在实体对象属性上加@JSONField (format="yyyy-MM-dd")            list.add(d1);            list.add(d2);            list.add(d3);            /*Map<Integer, String> map = new HashMap<>();            map.put(1, "test01");            map.put(2, "test02");            map.put(3, "test03");*/            //简单粗暴,对于Map这句也适用            String json = JSON.toJSONString(list);            System.out.println(json);            //取得流向JSP传递数据                response.getWriter().println(json);        } catch (IOException e) {            e.printStackTrace();        }    }


Json格式转换

public static void main(String[] args) {             List<Object> list = new ArrayList<>();             list.add("测试");             list.add("测试2");             list.add("测试3");             //JSON格式转换  map 字符串都适应             String str = JSON.toJSONString(list);             System.out.println(str);    }

结果

["测试","测试2","测试3"]

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台