ajax实现异步数据请求后台

ajax实现异步数据请求后台

有两种实现方法

原生js实现

/*
要有事件触发
比如在html中写一个按钮点击触发之类的
*/
<script type="text/javascript">
        var xhr;
        function ajaxDemo(){
            xhr = new XMLHttpRequest();
            xhr.onreadystatechange = callback();
            xhr.open("GET","${pageContext.request.contextPath}/category/queryCouponState.do");
            xhr.send();
        }
        function callback() {
            if(xhr.readyState==4){
                if(xhr.status ==200){
                    document.getElementById("result").innerHTML=xhr.responseText;
                }
            }

        }


    </script>

后台接受请求

springmvc接受异步提交的数据得用@ResponseBody标签

返回的数据用了工具类进行了格式转换，转成成了json类型返回

@ResponseBody
    @RequestMapping(value="queryCouponState.do",produces = "text/html;charset=utf-8",method = RequestMethod.GET)
    public String queryCoupon(
            Model model) throws Exception{
        System.out.println("==============");
        //根据状态查询出来的List数据
        ArrayList<PbCategory> categoryList =  categoryService.selectAll();

        System.out.println("条数"+categoryList.size());
        //System.err.println("状态"+state);
        model.addAttribute("categoryList",categoryList);

        JSONArray jsonArray = new JSONArray();


        return jsonArray.listToJson(categoryList);
    }

jquery方式

第一步先得有jquery文件，引入jquery文件

    <script src = "${pageContext.request.contextPath}/static/jquery-3.3.1/jquery-3.3.1.min.js"></script>

ajax异步访问的代码

此方法是页面一加载就被触发的，返回数据类型是json

<script type="text/javascript">
        $(document).ready(function(){
            $.get("${pageContext.request.contextPath}/ProjectTech/techlist.do",
                function (data) {
                console.log(data);
                         alert("dd");
                        alert(data[0].pbProjecttechnoname);

                    },
                    "json")
        })

    </script>

springmvc 后台接受的代码

此方法是我项目中用的直接拷贝过来的，里面有一些打印测试代码和业务逻辑代码

@ResponseBody
    @RequestMapping(value = "techlist.do",method = RequestMethod.GET)
    public String techlist(){
        System.out.println("=========ajax");
        ArrayList<PbProjectTechno> pbprotelist = projectTechService.selectAll();
        JSONArray jsonArray = new JSONArray();
        System.out.println(jsonArray.listToJson(pbprotelist));
        return jsonArray.listToJson(pbprotelist);
    }