zoukankan      html  css  js  c++  java
  • 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"]
    勿忘初心 得过且过
  • 相关阅读:
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 高精度乘法
    Java实现 蓝桥杯VIP 算法提高 现代诗如蚯蚓
    Java实现 蓝桥杯VIP 算法提高 现代诗如蚯蚓
    Java实现 蓝桥杯VIP 算法提高 现代诗如蚯蚓
    Java实现 蓝桥杯VIP 算法提高 现代诗如蚯蚓
    ddd
  • 原文地址:https://www.cnblogs.com/xpf1009/p/9227307.html
Copyright © 2011-2022 走看看