<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--
api-test.html页面进行模拟请求,页面中使用的是application/json格式进行
ajax请求
-->
<body class="hold-transition login-page">
<div style="width: 720px; margin:7% auto">
<div class="content">
<div class="continer-fluid">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-head">
<h5 class="m-0">接口测试</h5>
</div>
<div class="card-body">
<input id="id" type="text" placeholder="请输入id字段"/>
<input id="goodsName" type="text" placeholder="请输入goodsName字段"/>
<input id="weight" type="number" placeholder="请输入weight字段"/>
<input id="type" type="number" placeholder="请输入type字段"/>
<input id="onSale" type="number" placeholder="请输入onSale字段(0或1)"/>
<h6 class="card-title">接口返回数据如下: </h6>
<p class="card-text" id="result2"></p>
<a href="#"
class="btn btn-primary"
onclick="requestPostTest()">
发送POST请求
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
function requestPostTest(){
var onSale = true;
var id = $('#id').val();
var goodsName = $('#goodsName').val();
var weight = $('#weight').val();
var type = $('#type').val();
var onSaleValue = $('#onSale').val();
if(onSaleValue !== 1){
onSale = false;
}
console.log("id: " + id + ",goodsName: " + goodsName + ",weight: " + weight + ",type: " + type);
var data = {
id: id,
goodsName: goodsName,
weight: weight,
type: type,
onSale: onSale
};
window.alert(data.goodsName);
$.ajax({
type: 'POST', //方法类型
dataType: 'json', //预期服务器返回的类型
url: '/testdemo/post/httpmessageconverter',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data),
success: function(result){
$('#result2').html(JSON.stringify(result));
},
error: function(){
$('#result2').html("接口异常,请联系管理员!");
}
})
}
</script>
</body>
</html>