标签：异步 请求 add AJAX import cities servlet id areas
Asynchronous JavaScript And XML：异步的 JavaScript 和 XML
AJAX 不是新的编程，指的是⼀种交互⽅式，异步加载，客户端和服务器的数据交互更新在局部⻚⾯的技术，不需要刷新整个⻚⾯（局部刷新）
优点：
1、局部刷新，效率更⾼
2、⽤户体验更好
基于 jQuery 的 A JAX
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/1/21 0021
Time: 16:00
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!--不能⽤表单提交请求，改⽤ jQuery ⽅式动态绑定事件来提交,Servlet 不能跳转到 JSP，只能将数据返回-->
<script type="text/javascript">
$(function(){
var btn=$("#btn");<!--btn变量是btn标签-->
btn.click(function(){<!--btn的点击事件监听函数-->
$.ajax({
url:'/test',<!--action="/test"-->
type:'post',<!--method="post"-->
data:'id=1',<!--?id=1-->
dataType:'json',<!--servlet传过来的数据类型-->
success:function(data){<!--success实现函数,data是servlet传过来的参数-->
$("#id").val(data.id);
$("#name").val(data.name);
$("#score").val(data.score);
}
})
});
})
</script>
</head>
<body>
编号:<input id="id" type="text" ><br/>
姓名:<input id="name" type="text" ><br/>
成绩:<input id="score" type="text" ><br/>
<input id="btn" type="button" value="提交"/>
</body>
</html>
不能⽤表单提交请求，改⽤ jQuery ⽅式动态绑定事件来提交。
Servlet 不能跳转到 JSP，只能将数据返回。
package com.southwind.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/test")
public class TestServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {
String id = req.getParameter("id");
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
String str = "Hello World";
resp.getWriter().write(str);
}
}
传统的 WEB 数据交互 VS AJAX 数据交互
客户端请求的⽅式不同：
传统，浏览器发送同步请求 （form、a）
AJAX，异步引擎对象发送异步请求
服务器响应的⽅式不同：
传统，响应⼀个完整 JSP ⻚⾯（视图）
AJAX，响应需要的数据
客户端处理⽅式不同：
传统：需要等待服务器完成响应并且重新加载整个⻚⾯之后，⽤户才能进⾏后续的操作
AJAX：动态更新⻚⾯中的局部内容，不影响⽤户的其他操作
基于 jQuery 的 AJAX 语法
$.ajax({属性})
常⽤的属性参数：
url：请求的后端服务地址
type：请求⽅式，默认 get
data：请求参数
dataType：服务器返回的数据类型，text/json
success：请求成功的回调函数
error：请求失败的回调函数
complete：请求完成的回调函数（⽆论成功或者失败，都会调⽤）
JSON
JavaScript Object Notation，⼀种轻量级数据交互格式，完成 js 与 Java 等后端开发语⾔对象数据之间的转换
客户端和服务器之间传递对象数据，需要⽤ JSON 格式。
使用JSON需要导入，js类型不用配置，在Webapp下创建文件夹lib（不是WEB-INF下）
实例：创建一个可选择省->市->区的选择框
要求改变省时,城市也会改变,改变市时,区也会改变
结果图：
jsp中:
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/1/22 0022
Time: 16:15
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<!--$()工厂函数,#city,this是dom节点,而change(),val()方法是jquery包中的方法,所以用$()把dom节点转为jquery类型,可以调用jquery中的方法-->
<head>
<title>选择城市页面</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
//修改省
$("#province").change(function (){
var id = $(this).val();//选中的省份赋给id对象
//调用ajax异步请求传送信息
$.ajax({
url:"/location",
type:"post",
data:"id="+id+"&type=province",//选择的时哪个省份,把编号发过去
dataType:"JSON",//返回的参数类型是对象,调用JSON
success:function(data){//当成功收到servlet传到页面上的信息时调用success
//===========改变城市============
var content = "";
var cities = data.cities;
for(var i=0;i<cities.length;i++){//省下的城市
content += "<option>"+cities[i]+"</option>";
}
$("#city").html(content);//用content替换#area标签的内容
//===========改变区==============
content = "";
var areas = data.areas;
for(var i=0;i<areas.length;i++){//城市下的区
content += "<option>"+areas[i]+"</option>";
}
$("#area").html(content);//用content替换#area标签的内容
}
});
});
//修改城市
$("#city").change(function(){
var id = $(this).val();//把#city城市当前选中的value赋给id对象
//调用ajax异步请求传送信息
$.ajax({
url:"/location",
type:"POST",
data:"id="+id+"&type=city", //选择的是哪个城市,把城市编号发过去
dataType:"JSON",//返回的参数类型,是对象调用JSON,文本调用text
success:function (data){//当成功收到servlet传到页面上的信息时调用success
//用content存取新的地区option标签内容
var content = "";
for (var i=0;i<data.length;i++){
content += "<option>"+data[i]+"</option>"
}
//用content替换#area标签的内容
$("#area").html(content);
}
});
});
});
</script>
</head>
<body>
省:<select id="province">
<option value="陕西省">陕西省</option>
<option value="河南省">河南省</option>
<option value="江苏省">江苏省</option>
</select>
城市:<select id="city">
<option value="西安市">西安市</option>
<option value="宝鸡市">宝鸡市</option>
<option value="渭南市">渭南市</option>
</select>
区:<select id="area">
<option>雁塔区</option>
<option>莲湖区</option>
<option>新城区</option>
</select>
</body>
</html>
创建实体属性Location存放集合元素
package com.southwind.entity;
import java.util.List;
public class Location {
private List<String> cities;//存储某个省中的城市
private List<String> areas;//存储某个城市中的区
//得到城市
public List<String> getCities() {
return cities;
}
//存入城市
public void setCities(List<String> cities) {
this.cities = cities;
}
//得到区
public List<String> getAreas() {
return areas;
}
//存入区
public void setAreas(List<String> areas) {
this.areas = areas;
}
}
servlet中实现具体代码
package com.southwind.servlet;
import com.southwind.entity.Location;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@WebServlet("/location")
public class LocationServlet extends HttpServlet {
private static Map<String,List<String>> provinceMap;//一个省对应多个城市
private static Map<String, List<String>> cityMap;//一个城市对应多个区
static {
cityMap = new HashMap<>();
List<String> areas = new ArrayList<>();
//--------------------省-城市选择--------------
provinceMap = new HashMap<>();
List<String> cities = new ArrayList<>();
cities.add("⻄安市");
cities.add("宝鸡市");
cities.add("渭南市");
provinceMap.put("陕⻄省",cities);
cities = new ArrayList<>();
cities.add("郑州市");
cities.add("洛阳市");
cities.add("开封市");
provinceMap.put("河南省",cities);
cities = new ArrayList<>();
cities.add("南京市");
cities.add("苏州市");
cities.add("南通市");
provinceMap.put("江苏省",cities);
//------------------城市-区选择-----------------
//--------陕西省
//⻄安
areas.add("雁塔区");
areas.add("莲湖区");
areas.add("新城区");
cityMap.put("⻄安市",areas);
//宝鸡
areas = new ArrayList<>();
areas.add("陈仓区");
areas.add("渭宾区");
areas.add("新城区");
cityMap.put("宝鸡市",areas);
//渭南
areas = new ArrayList<>();
areas.add("临渭区");
areas.add("⾼新区");
cityMap.put("渭南市",areas);
//--------河南省
//郑州
areas = new ArrayList<>();
areas.add("郑州A区");
areas.add("郑州B区");
cityMap.put("郑州市",areas);
//洛阳
areas = new ArrayList<>();
areas.add("洛阳A区");
areas.add("洛阳B区");
cityMap.put("洛阳市",areas);
//开封
areas = new ArrayList<>();
areas.add("开封A区");
areas.add("开封B区");
cityMap.put("开封市",areas);
//--------江苏省
//南京市
areas = new ArrayList<>();
areas.add("南京A区");
areas.add("南京B区");
cityMap.put("南京市",areas);
//苏州市
areas = new ArrayList<>();
areas.add("苏州A区");
areas.add("苏州B区");
cityMap.put("苏州市",areas);
//南通市
areas = new ArrayList<>();
areas.add("南通A区");
areas.add("南通B区");
cityMap.put("南通市",areas);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String type = req.getParameter("type");//type为change的类型,是省还是城市
resp.setCharacterEncoding("UTF-8");
String id = req.getParameter("id");//id参数是传递过来的省/城市,由id知道该调用哪几个下属城市/区
switch (type){
case "city":
List<String> areas = cityMap.get(id);//把map中id对应的区集合赋给areas对象
JSONArray jsonArray = JSONArray.fromObject(areas);//将JAVA对象转换为JSON格式
resp.getWriter().write(jsonArray.toString());//返回jsonArray对象,被jsp的success接收为data
break;
case "province":
List<String> cities = provinceMap.get(id);//假设点击的是河南省,cities={郑州,洛阳,开封}
String city = cities.get(0);//得到河南省的第一个城市郑州
List<String> cityAreas = cityMap.get(city);//得到郑州市对应的区集合{郑州A区,郑州B区}
//把得到的信息存储到location中
Location location = new Location();
location.setCities(cities);//添加{郑州,洛阳,开封}
location.setAreas(cityAreas);//添加{郑州A区,郑州B区}
//假设点击河南省,location中存储的信息是{郑州,洛阳,开封},{郑州A区,郑州B区}
//自动显示 河南省-郑州市-郑州A区,接下来如果换成洛阳市则跳转到选择语句case "city":
JSONObject jsonObject = JSONObject.fromObject(location);//将JAVA对象转换为JSON格式
resp.getWriter().write(jsonObject.toString());//返回jsonObject对象,被jsp的success接收为data
break;
}
// resp.setCharacterEncoding("UTF-8");
// String id = req.getParameter("id");
// String type = req.getParameter("type");
// List<String> result = null;//创建一个能够存储对应城市/区的集合
// switch (type){
// case "province":
// //得到对应编号的城市集合
// result = provinceMap.get(id);
// break;
// case "city":
// //得到对应编号的区集合
// result = cityMap.get(id);
// break;
// }
// JSONArray jsonArray = JSONArray.fromObject(result);//将JAVA对象转换为JSON格式
// //把得到的城市/区集合返回去
// resp.getWriter().write(jsonArray.toString());
}
}
标签：异步,请求,add,AJAX,import,cities,servlet,id,areas 来源： https://blog.csdn.net/suo_jia_hao/article/details/113059018
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。