Ajax简介&Json数据格式(三)
jQuery的Ajax
原生js的Ajax虽然能够向后台发送请求,但是太过繁琐。jQuery对原生的Ajax方法进行了封装,下面是开发中使用的比较多的3种jQuery的Ajax实现。
请求方式 | 语法 |
---|---|
GET请求 | $.get(url,[data],[callback],[type]) |
POST请求 | $.post(url,[data],[callback],[type]) |
AJAX请求 | $.ajax([settings]) |
【注意】以上3种方法都是基于jQuery实现的,所以在使用之前必须先导入jquery的类库。
1、GET请求(掌握)
1.1、GET请求方式概述
通过远程HTTP GET请求发送请求。这是一个简单的GET请求,以取代复杂的$.ajax
。请求成功时可调用回调函数。如需复杂的ajax请求参数设置,请使用$.ajax
。
1.2、GET请求的语法格式
$.get(url,[data],[callback],[type])
其中,参数说明如下:
参数 | 说明 |
---|---|
url | 请求地址 |
data | 发送给服务器端的请求参数,格式: 方式一:字符串:key=value&key=value 方式二:json对象:{key:value,key:value...}推荐 |
callback | 回调函数:当请求成功后触发的函数 |
type | 返回参数类型:取值可以是xml, html, script, json, text(字符) , _default等 |
1.3、GET请求案例
【案例】GET请求案例
【需求】
- 点击按钮后,数据"name=张三,age=18"发送到后台服务器;
- 后台接收到数据后,响应"OK";
【JS代码】jqGetAjax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<!--
1. 点击按钮后,数据"name=张三,age=18"发送到后台服务器;
2. 后台接收到数据后,响应"OK";
url:请求地址.例如:jqGetServlet
data:请求的参数,就是提交到servlet中的数据
方式一:字符串 提交格式:"name=张三&age=18"
方式二:js对象即json格式,{"name":"张三","age":18}
callback:回调函数,处理响应数据的。发送请求成功之后调用。
作用:处理响应数据。
type:设置响应数据的类型或者格式。
默认:text字符串格式
json:json
-->
</head>
<body>
<button id="btn">发送ajax的get请求</button>
</body>
<script>
$("#btn").click(function () {
//发送jq 的ajax get请求
// $.get("/jqGetServlet","name=张三&age=18",function (result) {提交的请求数据以字符串形式提交
$.get("/jqGetServlet",{"name":"张三","age":18},function (result) {//提交的请求数据以js对象即json格式
//请求和响应都OK 的时候 调用
alert(result);
// },"text");
},"json");
});
</script>
</html>
【servlet代码】JqGetServlet.java
@WebServlet(urlPatterns = "/jqGetServlet")
public class JqGetServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//处理jq的get请求
String name = request.getParameter("name");
String age = request.getParameter("age");
//响应数据 字符串
response.setContentType("text/html;charset=utf-8");
//响应数据
// response.getWriter().print("接收到了请求数据");
//响应json格式
response.getWriter().print("{"name":"班长","age":20}");
}
}
2、POST请求(掌握)
2.1、POST请求方式概述
通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能,如需复杂的ajax参数设置请使用$.ajax。
2.2、POST请求的语法格式
$.post(url, [data], [callback], [type]) 其中,参数说明如下:
参数 | 说明 |
---|---|
url | 请求的服务器端url地址 |
data | 发送给服务器端的请求参数,格式可以是key=value,也可以是json格式 |
callback | 当请求成功后的回调函数,可以在函数体中编写我们的逻辑代码 |
type | 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul等 |
2.3、POST请求案例
1 、【js代码】 jqPostAjax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<!--
1. 点击按钮后,数据"name=张三,age=18"发送到后台服务器;
2. 后台接收到数据后,响应"OK";
-->
</head>
<body>
<button id="btn">发送ajax的get请求</button>
</body>
<script>
$("#btn").click(function () {
//发送jq 的ajax post请求
$.post("/jqPostServlet",{"name":"张三","age":18},function (result) {
//请求和响应都OK 的时候 调用
alert(result);
},"json");
});
</script>
</html>
2.Servlet代码
@WebServlet(urlPatterns = "/jqPostServlet")
public class JqPostServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//处理jq的post请求
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
String age = request.getParameter("age");
//响应数据 字符串
response.setContentType("text/html;charset=utf-8");
//响应json格式
response.getWriter().print("{"name":"班长","age":20}");
}
}
3、Ajax请求(理解)
3.1 Ajax请求概述
对于jq的get或者post请求,如果服务器端发生异常,这两种方式都不能接收异常信息。但是我们可以使用jq的ajax的请求方式来处理。通过 HTTP 请求加载远程数据。jQuery 底层 A JAX 实现。简单易用的高层实现见get和post方法。$.ajax()方法可以更加详细的设置底层的参数。jq的ajax请求不属于一种请求方式,只是一种实现向服务器端发送请求的方式,具体到底是get还是post请求还得看我们设置的是什么请求方式。
3.2 A JAX请求方式语法
$.ajax({settings}) 其中,settings是一个js字面量形式的对象,格式是{name:value,name:value... ...},常用的name属性名如下:
3.3 A JAX请求方式代码
【JS代码】jqAjaxDemo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq 的 ajax</title>
</head>
<body>
<button id="btn">发送ajax的get请求</button>
<script src="../js/jquery-3.3.1.js"></script>
</body>
<script>
$("#btn").click(function () {
$.ajax({
url:"/jqGetServlet",
type:"get",
// data:"name=张三&age=18",
data:{"name":"张三","age":18},
//接收响应数据的类型
dataType:"json",
//响应成功
success:function (aaa) {
alert(aaa);
},
//服务器端有异常
error:function () {
alert("加班吧");
}
});
});
</script>
</html>
【servlet代码】JqAjaxServlet.java
@WebServlet(urlPatterns = "/jqAjaxServlet")
public class JqAjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//处理jq的ajax请求
request.setCharacterEncoding("utf-8");
//处理jq的get请求
String name = request.getParameter("name");
String age = request.getParameter("age");
//处理响应乱码
response.setContentType("text/html;charset=utf-8");
// int i=1/0;
//响应数据
// response.getWriter().print("接收到了请求数据");
//响应json格式
response.getWriter().print("{"name":"班长","age":20}");
}
}
小结:
jq的三种请求方式,必须掌握的是get和post请求,对于ajax的请求了解即可。那么在开发中什么时候使用get,什么时候使用post呢?
1、查询、删除。一般都是通过id,传递的数据比较少,建议使用get。get请求的数据放到地址栏中。
2、新增、更新(一般都是form表单中),传递数据比较多,建议使用post。
转载自:https://juejin.cn/post/7244719888882286648