wuheng
/
vip21-javaweb


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
							<%--
  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>
    <button onclick="document.getElementById('ajax-respone').innerHTML = '' " > cleanData </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>