下面是html请求web服务器api接口的示例,是post发送json方式请求。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="~/lib/jquery-3.3.1/jquery-3.1.1.js"></script>
<script src="~/lib/jquery-3.3.1/jquery-3.1.1.min.js"></script>
</head>
<body>
<fieldset>
<legend>身份验证</legend>
<form id="login_form">
<label for="UserName">用户名:</label><input type="text" name="userName" id="userName" value="admin" />
<br />
<br />
<label for="Password">密码:</label><input type="password" name="password" id="password" value="123" />
<br />
<br />
</form>
<button id="login">登录</button>
</fieldset>
<script>
$(function () {
$("#login").on("click", function () {
var fields = $('#login_form').serializeArray();
var obj = {};
$.each(fields, function (index, field) {
obj[field.name] = field.value;
})
$.ajax({
url: "http://localhost:8089/api/Home",
data: JSON.stringify(obj),
method: "post",
dataType: "json",
contentType: 'application/json',
success: function (data) {
console.log(data)
if (data.success) {
window.token = data.Token;
alert("登录成功");
} else {
alert("登录失败:" + data.Message);
}
}
});
});
});
</script>
</body>
</html>