欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前后端调试

程序员文章站 2024-03-26 08:43:11
...

前言

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

正文

调试界面
前后端调试
返回的数据
前后端调试
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();
    }

结束

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

相关标签： HTML 前后端联调

上一篇： Nginx反向代理解决前后端联调跨域问题

下一篇： 由三维点计算照相机矩阵

推荐阅读