Ajax_数据格式_html

Posted 2022-02-13 huangpeideng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax_数据格式_html相关的知识，希望对你有一定的参考价值。

解析html

HTML是一些普通的文本组成，如果服务器通过CMLHttpRequest发送HTML，文本将存储在responseText属性中。
不必从responseText属性中读取数据，他已经是希望的格式，可以直接将他插入到页面中。
插入HTML代码最简单的是更新这个元素的innerHTML属性。

准备装载数据的html文本include.html

<h2>这是一个h2标题</h2>
<a href="include.html">这是一个超链接</a>

负责对服务器请求的页面

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/6/26
  Time: 9:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax请求html文本</title>
    <style>
        #detail 
            width: 200px;
            height: 200px;
            border: 1px dotted red;
        
    </style>
    <script>
        window.onload = function () 
            //获取a标签添加点击事件函数
            document.getElementsByTagName("a")[0].onclick = function () 
                var request = new XMLHttpRequest();
                var method = "GET";
                //this代表当前获取到的a标签
                var url = this.href;
                request.open(method, url);
                //get请求没有发送数据到服务器
                request.send(null);
                request.onreadystatechange = function () 
                    if (request.readyState == 4) 
                        if (request.status == 200 || request.status == 304) 
                            //因为html也是文本格式，所以用XMLHttpequest对象的resposeText属性获取
                            document.getElementById("detail").innerHTML = request.responseText;
                        
                    
                
                //取消a标签的默认行为
                return false;
            
        
    </script>
</head>
<body>
<h1>点击下面的超链接实现Ajax请求html文本</h1>
<a href="include.html">点击我实现局部刷新</a>
<div id="detail"></div>
</body>
</html>

效果：

　　点击超链接，在a标签下面的div中插入html代码

以上是关于Ajax_数据格式_html的主要内容，如果未能解决你的问题，请参考以下文章

如何将ajax请求返回的Json格式数据循环输出成table形式

python 解析ajax请求带有json参数，请求方式是post的url（注意：参数的json格式的）