前后端调试 | 易学教程

前言

之前一直写后端的接口，没有前后端调试过，这段时间有机会来试试了，下边就直接上代码吧！

正文

调试界面
在这里插入图片描述
返回的数据

html代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else{// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("myDiv").innerHTML=xmlhttp.response;
        // alert(xmlhttp.responseText);
		// alert(xmlhttp.response);
       }
   }
   
	//发送请求
	 //xmlhttp.open("GET","http://localhost:8080/JGGFramee/test",true);
	 //xmlhttp.open("POST","http://localhost:8080/oa/affiche/dept/query.do",true);
	xmlhttp.open("POST", "http://localhost:8080/JGGFramee/getUser",true);
	xmlhttp.send("username=admin&password=12345");
    //xmlhttp.send();
}
</script>
</head>
<body id="myDiv">
 
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<!-- <div id="myDiv"></div> -->
</body>
</html>

后端方法

 @RequestMapping(value = "/getUser")
    @ResponseBody
    public String getList(HttpServletRequest request, HttpServletResponse response , User user) throws IOException {

        response.setHeader("Access-Control-Allow-Origin","*");
        response.setHeader("Access-Control-Allow-Methods","POST, GET, PUT, OPTIONS, DELETE");

        BufferedReader reader = request.getReader();
        char[] buf = new char[512];
        int len = 0;
        StringBuffer contentBuffer = new StringBuffer();
        while ((len = reader.read(buf)) != -1) {
            contentBuffer.append(buf, 0, len);
        }
        return contentBuffer.toString();
    }

结束

中间涉及到的问题很多，有待整理发出来呢！

来源：CSDN

作者：郝龙飞

链接：https://blog.csdn.net/qq_39674002/article/details/103493351

标签

xmlhttp