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

采用阿里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格式

    //前台ajax
function 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"]
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章