ajax和实现ajax

最新推荐文章于 2024-10-18 19:02:29 发布

2401_82454653

最新推荐文章于 2024-10-18 19:02:29 发布

阅读量653

点赞数 27

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/2401_82454653/article/details/137913082

版权

本文介绍了Ajax的基本概念，包括其通过事件触发的特性，服务器响应数据而非完整页面，以及如何使用jQuery进行Ajax请求。还详细讲解了JSON格式在前后端交互中的重要性，并展示了如何在服务器端返回JSON数据和在前端解析处理这些数据。

摘要由CSDN通过智能技术生成

什么是ajax

例如: 百度搜索框----使用了ajax.

当在百度搜索框触发键盘弹起事件时，会向服务器发送请求，服务器响应数据给事件。这里并没有响应整个页面给客户端。这就使用了ajax异步【局部】刷新

比如: 百度地图

比如: 视频点赞。

总结:

（1） ajax一定是通过事件触发的。借助js。

（2）ajax服务器响应的不在是网页，而是数据。

如何实现ajax

借助jquery完成ajax请求。

导入jquery插件。
使用jQuery中的ajax方法。
<body>
<button οnclick="send()">发送ajax请求</button>
</body>
<script>
function send() {
$.ajax({
url: "AjaxServlet",//表示请求的地址
type: "post", //请求方式 get post
data: {name: "zs", age: 18}, //携带的数据 {key:value,key:value}
success: function (resp) { //服务响应成功后触发的函数 resp:表示服务器响应的数据
alert(resp);
},
error: function(){ //表示服务器响应失败时触发该函数。
alert("服务器错误");
}
})
}
</script>
编写了Servlet

@WebServlet(name = "AjaxServlet",urlPatterns = "/AjaxServlet")
public class AjaxServlet extends HttpServlet {

@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//接受ajax请求携带的参数
String name = req.getParameter("name");
String age = req.getParameter("age");
System.out.println("name====>"+name+";age=====>"+age);
//响应数据给ajax请求 jsp

PrintWriter out = resp.getWriter();
out.print("hello ajax");

//关闭out对象
out.close();

}
}

使用get和post方式发送ajax

$.get("请求地址",{key:value,key:value..},function(resp){成功后触发的函数})

$.post("请求地址",{key:value,key:value..},function(resp){成功后触发的函数})

服务器的代码

服务器响应的数据类型

1.文本类型---默认响应的类型就是文本类。
2.xml类型---现在很少使用--用户人工智能上--需要解析xml文件。
<people>
<name n="zs">张三</name>
<age>18</age>
</people>
3.json数据类型---企业开发使用最多的数据类型。
什么是json格式

JSON（JavaScript Object Notation 原生js对象）一种简单的数据格式，比xml更轻巧。JSON
是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。
{"key":"value","key":"value"} 表示一个json对象。
多个json对象[
{"key":"value","key":"value"},
{"key":"value","key":"value"},
{"key":"value","key":"value"}
]

[
{
"name":"XXX",
"age":18,
"address":"香港"
},
{
"name":"XXX",
"age":18,
"address":{
"province":"河南",
"city":"郑州市"
},
"hobby":["游泳","跑步","打麻将"]
}
]

规则如下:
1）映射用冒号（“：”）表示。名称:值
2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2
3）映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}
4）并列数据的集合（数组）用方括号(“[]”)表示。
[
{名称1:值,名称2:值2},
{名称1:值,名称2:值2}
]
5 元素值可具有的类型：string, number, object, array, true, false, null

服务端如何返回json数据

后台

@WebServlet(urlPatterns = "/JSONServlet")
public class JSONServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//响应数据--json格式。
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();

//以后从数据库中查询--写死在这了
User user=new User(1,"XXX","河南商丘夏邑县城关镇");
//java对象转化为json字符串数据。--手动转
String json="{\"id\":"+user.getId()+",\"name\":\""+user.getName()+"\",\"address\":\""+user.getAddress()+"\"}";
System.out.println(json);

out.print(json);

out.close();

}

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

}
}

前端

<html>
<head>
<title>Title</title>
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<button οnclick="send()">发送ajax返回json数据</button>
</body>
<script>

function send() {
// $.post("/JSONServlet",function(result){ //result---字符串json格式的数据.---把后台的字符串转化为json对象。第一种:JSON
// var o = JSON.parse(result); //把json字符串转化为json对象
// alert(o.name)
// });
$.post("/JSONServlet",function(result){ //result---字符串json格式的数据.---把后台的字符串转化为json对象。第一种:JSON

alert(result.name)
},"json"); //“json”:返回的是json字符串，jquery你直接帮我转换后为json对象赋值给result变量
}
</script>
</html>

上面服务器返回json数据时，需要手动转化，这种方式非常麻烦。一般需要第三方的工具jar来完成转化功能【java---json字符串】---阿里巴巴fastjson。

ajax---发送请求---返回json字符串---弹出json对象的一个属性

把服务器响应的集合数据展示到表格中

<html>
<head>
<title>Title</title>
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body >
<%--<button οnclick="send()">发送ajax返回json数据</button>--%>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>地址</th>
</tr>
<tbody id="tbody">

</tbody>
</table>
</body>
<script>
$(function(){
// $.post("/JSONServlet",function(result){ //result---字符串json格式的数据.---把后台的字符串转化为json对象。第一种:JSON
// var o = JSON.parse(result); //把json字符串转化为json对象
// alert(o.name)
// });
$.post("/JSONServlet",function(result){ //result---字符串json格式的数据.---把后台的字符串转化为json对象。第一种:JSON
var str="";
for(var i=0;i<result.length;i++){
str+="<tr><td>"+result[i].id+"</td><td>"+result[i].name+"</td><td>"+result[i].address+"</td></tr>"
}

$("#tbody").html(str);

},"json"); //“json”:返回的是json字符串，jquery你直接帮我转换后为json对象赋值给result变量
})

</script>
</html>