Ajax发送get请求，发送post请求
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
//绑定点击事件
$("#btn").click(function(){
//发送post方式请求
$.post("${pageContext.request.contextPath}/user/showOne",{"name":"张三","password":"123456"},function(result){
console.log(result);
var idLi = $("<li>").text(result.id);
var nameLi = $("<li>").text(result.name);
var ageLi = $("<li>").text(result.age);
var birLi = $("<li>").text(result.bir);
$("ul").append(idLi).append(nameLi).append(ageLi).append(birLi).show(2000);
},"JSON");
//发送get方式请求
$.get("${pageContext.request.contextPath}/user/showOne",{"name":"张三","password":"123456"},function(result){
console.log(result);
var idLi = $("<li>").text(result.id);
var nameLi = $("<li>").text(result.name);
var ageLi = $("<li>").text(result.age);
var birLi = $("<li>").text(result.bir);
$("ul").append(idLi).append(nameLi).append(ageLi).append(birLi).show(2000);
},"JSON");
});
});
</script>
</head>
<body>
<h2>使用ajax方式展示一个对象信息到页面</h2>
<input type="button" value="点我显示一个人的信息" id="btn"/>
<hr/>
<ul id="ul" style="display: none;">
</ul>
</body>
</html>
jQuery封装的Ajax，想后台发送get,post请求
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
//绑定点击事件
$("#btn").click(function(){
//使用jquery对ajax封装 发送post方式请求
$.ajax({
type:"POST", //可以直接换为GET请求，url地址后面直接？拼接参数
data:{"status":"1","id":"2"},
url:"${pageContext.request.contextPath}/user/showOne",
dataType:"JSON", //推荐方式 后台加入响应类型 前台也要加入dataType为json 这样获取的json格式数据一定是js对象 可以直接使用
success:function(result){
console.log(typeof result);
var idLi = $("<li>").text(result.id);
var nameLi = $("<li>").text(result.name);
var ageLi = $("<li>").text(result.age);
var birLi = $("<li>").text(result.bir);
$("ul").append(idLi).append(nameLi).append(ageLi).append(birLi).show(2000);
}
});
});
});
</script>
</head>
<body>
<h2>使用ajax方式展示一个对象信息到页面</h2>
<input type="button" value="点我显示一个人的信息" id="btn"/>
<hr/>
<ul id="ul" style="display: none;">
</ul>
</body>
</html>
jQueryAPI详细使用：
http://jquery.cuishifeng.cn/
版权声明：本文为qq_42191775原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。