html简单api接口调用实例适配大部分get接口

<html>
<head>
<style>
input[type=text] {
    width: 100%;
    padding: 100px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
}
input[type=button] {
    text-align:center;
    background-color: #4CAF50;
    color: white;
    padding: 12px 50%;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
div#data {
    width:100%; 
	height:100%;
    border: 2px solid #ccc;
    border-radius: 4px;
    padding: 12px 20px;
    margin: 8px 0;
}
textarea{
width:100%;
height:50%;
font-size:20px;
(MISSING)box-sizing:border-box;
resize:none;

}
div#data p{
       text-align:center;
}
</style>
<script>
var dataList = [];
function getData(){
    var q = document.getElementById("q").value;
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
		 document.getElementById("data2").innerHTML = "<p></p>";
            dataList.push({q: q, data: this.responseText});
            document.getElementById("data").innerHTML = "<ul>";
            for (var i = dataList.length-1; i >= 0; i--) {
                document.getElementById("data").innerHTML += "<p>序号：" + (i+1) + "</p><p>输入内容：" + dataList[i].q + "</p><p>ChatGPT</p><p><textarea>" + dataList[i].data + "</textarea></p>";
            }
            document.getElementById("data").innerHTML += "</ul>";
        } else {
            document.getElementById("data2").innerHTML = "<p>正在提交数据中...</p>";
        }
    };
	
    xhttp.open("GET", "https://hk.wxnodes.cn/wxCo.php?q="+q, true);
    xhttp.send();
}
</script>
</head>
<body>
<input type="text" id="q"  placeholder="请输入你想问的问题"/>
<input type="button" value="提交" onclick="getData()" />
<div id="data2"></div>
<div id="data" ></div>
</body>
</html>

注：要想html标签在html页面正常显示而不被解析：最简单的方式有3种

1，用xmp标签包裹内容，代码如下：

1 <xmp><a>xianshi xmp</a></xmp>

2,用textarea标签包裹内容，代码如下：

<pre><textarea><a>woshi textarea</a></textarea></pre>

3，转义<为<，>为>

<pre>&lta&gtwoshi pre&lt/a&gt</pre>

除了以上方式，在h6中可以用<script type="text/html">或<script type="text/template">来实现，代码如下：

</script>

另外多说一点，在vue中，直接将代码串放入{{}}中即可，但是注意一点，标签结尾出需要加转义符比如这样<script>var a="bb"</script>（不加的话会报错）

html简单api接口调用实例适配大部分get接口

Comments NOTHING

取消回复