怎样用ajax请求：https://api.jisuapi.com/zidian/word?appkey=d02d920e4fbb8499&word=
这个URL获得json，然后把json里的项目在HTML中显示出来呢？
<!DOCTYPE html>
<html>
<meta charset="UTF-8"/>
<head>
<script src="jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function (){
$("button").click(function(){
var text="测";
//这里如何请求和渲染数据到html
});
});
</script>
</head>
<body>
<button>测试</button>
<div class="result">
<ul>
<li>显示结果：<p></p></li>
<li>显示结果：<p></p></li>
</ul>
</div>
</body>
</html>
题主可以搭建代理用下面的
<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<head>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
var text = "测";
$.ajax({
url: 'proxy.php' ,//注意修改代理网址，注意是get请求，非post请求
data: { text },
dataType:'json',
success: function (d) {
if (d.msg == 'ok') {
$('p[data-key]').each(function () {
this.innerHTML=eval(`d.${this.dataset.key}`)
})
}
}
})
});
});
</script>
</head>
<body>
<button>测试</button>
<div class="result">
<ul>
<li>笔顺：<p data-key="result.bishun"></p></li>
<li>部首：<p data-key="result.bushou"></p></li>
<li>英语：<p data-key="result.english[0]"></p></li>
<li>释义：<p data-key="result.explain[0].content"></p></li>
<li>拼音：<p data-key="result.pinyin"></p></li>
</ul>
</div>
</body>
</html>
proxy.php
<?php
$text=$_GET["text"];
$url="https://api.jisuapi.com/zidian/word?appkey=d02d920e4fbb8499&word=".$text;
echo file_get_contents($url);
?>
需要借助后端语言来完成，比如利用php：可以这样实现：
<!DOCTYPE html>
<html>
<meta charset="UTF-8"/>
<head>
<script src="jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function (){
$("button").click(function(){
var text="测";
//这里如何请求和渲染数据到html
$.ajax({
url : 'api.php',
type : 'get',
async: false,
data : formData,
cache:false,
contentType: false,
processData: false,
dataType: "json",
success : function(datao) {
if(datao.code=='ok'){
var data=datao.data
var html='';
for(var i in data){
html=+'<li>显示结果：<p>'+data[u].你要的结果字段+'</p></li>';
}
$('.result ul').append(html);
}
}
});
});
});
</script>
</head>
<body>
<button>测试</button>
<div class="result">
<ul>
<li>显示结果：<p></p></li>
<li>显示结果：<p></p></li>
</ul>
</div>
</body>
</html>
api.php 代码类似如下：
<?php
$result=getUrlData('https://api.jisuapi.com/zidian/word?appkey=d02d920e4fbb8499&word=%E6%89%93%E6%80%AA');//返回json格式的话
echo $result;
function getUrlData($url){//get提交数据
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HEADER, 0);
$output = curl_exec($ch);
curl_close($ch);
return $output;
}
?>