Ajax简介&Json数据格式（三）
站长
· 阅读数 13
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