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

叁歲伎倆 2022-06-07 11:53 164阅读 0赞

**采用阿里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"]