<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>智能机器人</title>
<link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<style type="text/css">
.container {
width: 90%;
margin: 10px auto 0;
padding: 0;
}
ul {
padding-left: 0;
}
li {
list-style-type: none;
}
input[type=text] {
width: 100%;
height: 40px;
}
input[type=button] {
width: 100%;
}
#appRequest {
width: 90%;
margin: 20px auto;
}
</style>
<body>
<form>
<div class="container">
<div class="form-group">
<input type="text" id='requestId' placeholder="请输入要查询的关键词" />
</div>
<input type="button" id='requestBtn' class="btn btn-info" value='点击查询' />
</div>
</form>
<div id='appRequest'>
<ul>
<li>{{requestList.content}}</li>
<!-- <li>{{requestList.type}}</li> -->
</ul>
</div>
<script src="http://cdn.bootcss.com/vue/1.0.28/vue.js"></script>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript">
$(function() {
var myRequest = new Vue({
el: "#appRequest",
data: {
requestList: []
}
})
$('#requestBtn').click(function() {
var value = $('#requestId').val();
var url = 'http://api.jisuapi.com/iqa/query?appkey=a862ded1133c3f89&question=' + value;
$.ajax({
url: url,
type: 'get',
dataType: 'jsonp',
success: function(data) {
console.log(data.status)
if (data.status == '0') {
console.log(data)
console.log(data.result)
// console.log(data.result.type)
console.log(data.result.content)
// console.log(data.result.relquestion)
myRequest.requestList = data.result;
}
}
})
});
})
</script>
</body>
</html>
网友评论