AJAX请求

最新推荐文章于 2024-11-04 16:42:12 发布

一个不一样的小程序猿

最新推荐文章于 2024-11-04 16:42:12 发布

阅读量83

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/dengdengdecai/article/details/115897290

版权

什么是ajax请求

ajax是一种浏览器通过js异步发起请求。局部更新页面的技术。

前端ajax请求的四个步骤

1.首先创建XMLHtttpRequest

2.调用open方法设置请求参数

3.调用send方法发送请求

4.在send方法前绑定onreadystatechange事件，处理请求完成后的操作

一个完整的ajax请求

 //ajax请求
        function ajaxRequest(){
            //1.首先创建XMLHttpRequest
            var xmlHttpRequest =new XMLHttpRequest();
            //2.调用open方法设置请求参数
             var transmit = "welcome?Number="+number;
            xmlHttpRequest.open("get",transmit,true)；
            //3.调用send方法发送请求
            xmlHttpRequest.send();
            //4.在send方法前绑定提交事件,处理请求完成后的操作
        }

一个完整的ajax请求带取值

function ajaxRequest() {
            var xmlHttpRequest = new XMLHttpRequest();
            var number = document.getElementById("Number").value;
            xmlHttpRequest.onreadystatechange =function () {
                if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                    var mes = window.eval("mess="+xmlHttpRequest.responseText);
                    console.log(mes[1].Name);
                    alert(xmlHttpRequest.responseText);
                    var sage= JSON.parse(xmlHttpRequest.responseText);
                    alert(sage[0].Name);
                    for (let i = 0; i <sage.length ; i++) {
                            console.log(sage[i].Name)
                    }
                    // var jsonstring = JSON.stringify(xmlHttpRequest.responseText);
                    // console.log(jsonstring);
                    // var s = JSON.parse(jsonstring);
                    // console.log(s);
                    // for (let i = 0; i <s.length ; i++) {
                    //     console.log("学年:"+s[i].Year+
                    //         "学期:"+s[i].Term +
                    //         "年级:"+s[i].Grade+
                    //         "班级:"+ s[i].CLASS+
                    //         "学号:"+s[i].Number+
                    //         "姓名:"+s[i].Name+
                    //         "课程代码:"+s[i].Code+
                    //         "课程名:"+s[i].ClassName+
                    //         "书本费:"+s[i].BookDiscount)
                    // }
                }
            };
            var transmit = "welcome?Number="+number;
            xmlHttpRequest.open("get",transmit,true);
            xmlHttpRequest.send();
        }

后端返回ajax的put请求给前端接收

最好要转成json对象

        PrintWriter writer = null;
        String number = request.getParameter("Number");
//        System.out.println("得到了"+number);
        String sql ="select * from bookfare where Number =?";
        Connection getconnect = Javautil.getconnect();
        List<Object> checkdata = Javautil.Checkdata(getconnect,sql,number);
        response.setContentType("text/html;charset=UTF-8");
        Gson gson = new Gson();
        String s = gson.toJson(checkdata);
        PrintWriter writer1 = response.getWriter();
        writer1.println(s);
//        for (Object o:checkdata
//        ) {
//            gson.toJson(o);
//            writer = response.getWriter();
//            writer.println(o);
//        }
            writer1.close();
            writer1.flush();