jQuery的ajax异步请求

最新推荐文章于 2024-08-09 17:26:52 发布

来一杯java压压惊

最新推荐文章于 2024-08-09 17:26:52 发布

阅读量189

点赞数

分类专栏：前端 # jQuery

本文链接：https://blog.csdn.net/ShiZaolin/article/details/104417922

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

get请求

jQuery.get(url,[data],[callback],[type]):通过远程HTTP GET请求载入信息
这是一个简单的get请求功能以获取复杂 $. a j a x, 请求成功时可以调用回调函数，如果需要在出错时执行参数，请使用$ .ajax。
参数：
url:待载入页面的URL
data:待发送key/value参数
callback:载入成功时回调函数
type:返回内容格式:xml,html,script,json,text,_default

案例:

创建登录servlet

@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet{
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
//response.setHeader("content-type","text/html;charset=utf-8");//以前的html方式返回信息
response.setHeader("content-type","text/json;charset=utf-8");
String username=request.getParameter("username");
String password=request.getParameter("password");
Map<String,Object> map=new HashMap<>();
if("szl".equals(username)&&"123".equals(password)){
map.push("success",1);
map.push("errMsg","");
}else{
map.push("success",0);
map.push("errMsg","用户名或密码错误");
}
//创建json格式的mapper对象
ObjectMapper mapper=new ObjectMapper();
String json=mapper.writeValueAsString(map);
response.getWriter().write(json);
}
}

protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
doGet(request,response);
}

HTML页面

<head>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(funtion(){
//按钮绑定事件
$('#loginBtn').click(function(){
//获取表单数据
var username=$('#username').val();
var password=$('#password').val();
//封装表单数据 username=szl&password=123
//封装成对象
var params={'username':username,'password':password};
console.log(params);
//发送get请求
val url='${pageContext,request,contextPath}/LoginServlet';
$.get(url,params,function(data){
//data服务器返回的数据
console.log(data)；
//把data转成对象
var result=JSON.parse(data);
if(result.success==1){
//登录成功
$('#tip').text("登录成功");
}else{
//登录失败
$('#tip').text(result.errMsg);
}
},'text');
});
});
</script>
</head>
<body>
<span style="color:red" id="tip"></span>
<form>
用户名:<input type="text" name="username" id="username"><br>
密码:<input type="password" name="password" id="password"><br>
<input type="button" id="loginBtn" value="登录">
</form>
</body>

post请求

jQuery.post(url,[data],[callback],[type]):通过远程HTTP POST请求载入信息
这是一个简单的POST请求功能以获取复杂 $. a j a x, 请求成功时可以调用回调函数，如果需要在出错时执行参数，请使用$ .ajax。
参数：
url:发送请求地址
data:待发送key/value参数
callback:载入成功时回调函数
type:返回内容格式:xml,html,script,json,text,_default

案例:

创建登录servlet

@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet{
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
//response.setHeader("content-type","text/html;charset=utf-8");//以前的html方式返回信息
response.setHeader("content-type","text/json;charset=utf-8");
String username=request.getParameter("username");
String password=request.getParameter("password");
Map<String,Object> map=new HashMap<>();
if("szl".equals(username)&&"123".equals(password)){
map.push("success",1);
map.push("errMsg","");
}else{
map.push("success",0);
map.push("errMsg","用户名或密码错误");
}
//创建json格式的mapper对象
ObjectMapper mapper=new ObjectMapper();
String json=mapper.writeValueAsString(map);
response.getWriter().write(json);
}
}

protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
doGet(request,response);
}

HTML页面

<head>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(funtion(){
//按钮绑定事件
$('#loginBtn').click(function(){
//获取表单数据
var username=$('#username').val();
var password=$('#password').val();
//封装表单数据 username=szl&password=123
//封装成对象
var params={'username':username,'password':password};
console.log(params);
//发送post请求
val url='${pageContext,request,contextPath}/LoginServlet';
$.post(url,params,function(data){
//data服务器返回的数据
console.log(data)；
//把data转成对象
var result=JSON.parse(data);
if(result.success==1){
//登录成功
$('#tip').text("登录成功");
}else{
//登录失败
$('#tip').text(result.errMsg);
}
},'text');
});
});
</script>
</head>
<body>
<span style="color:red" id="tip"></span>
<form>
用户名:<input type="text" name="username" id="username"><br>
密码:<input type="password" name="password" id="password"><br>
<input type="button" id="loginBtn" value="登录">
</form>
</body>