wuheng
/
vip21-javaweb


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
							<%--
  Created by IntelliJ IDEA.
  User: 武恒
  Date: 2023/2/10
  Time: 11:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax</title>
</head>
<body>
<div style="width: 800px; margin: 0 auto">
    <button onclick="sendData()" > sendData </button>
    <div id="ajax-respone" style="width: 800px; height: 390px; border: 1px solid red; overflow: auto;">

    </div>

</div>

<script>

    var sendData = function(){
        var xmlHttpRequest = new XMLHttpRequest();
        xmlHttpRequest.onreadystatechange = function () {
            if ( xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200 ) {
                //document.getElementById("ajax-respone").innerHTML = xmlHttpRequest.responseText;
                var parse = JSON.parse( xmlHttpRequest.responseText );
                for (let i = 0; i < parse.length; i++) {
                    let str = parse[i].brandName + " "
                            + parse[i].companyName + " "
                            + parse[i].description + " "
                            + parse[i].id + " "
                    var htmlSpanElement = document.createElement("p");
                    htmlSpanElement.innerText = str
                    document.getElementById("ajax-respone").append( htmlSpanElement )
                }
            }
        }
        xmlHttpRequest.open("GET", "<%=request.getContextPath()%>/jsonRequest", true)
        xmlHttpRequest.send()
    }

</script>
</body>
</html>