AJAX实现两个下拉框之间内容的联动

最新推荐文章于 2021-10-18 15:03:02 发布

PAOL

最新推荐文章于 2021-10-18 15:03:02 发布

阅读量4.4k

点赞数 2

本文链接：https://blog.csdn.net/qq_42613859/article/details/80926014

版权

1.效果

第一个下拉框选择蔬菜时，第二个联动显示黄瓜，番茄

第一个下拉框选择水果时，第二个联动显示苹果，菠萝

2.实现

JSP页面，connect.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'connect.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">


<script type="text/javascript">
  function change(){
   var sortName = document.getElementById("sort").value;

   //1.获得ajax对象
   var xhr = new XMLHttpRequest();
   //2.新建请求
   xhr.open("post","ConnectServlet.do",true);
   //3.请求头
   xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   //4.请求体
   xhr.send("method=connect&sortName="+sortName);

   //5.前后台交互
   xhr.onreadystatechange = function(){
    //正常交互
    if(xhr.status==200 && xhr.readyState==4){
     //6.得到返回结果
     var result = xhr.responseText;
     //拆分json里的所有数据为单个数据
     var obj = eval("("+result+")");
     var arr = obj.list;
     //7.根据结果处理同步，种类下拉框联动内容下拉框
     //先清空内容下拉框
     document.getElementById("content").options.length=0;
     //将要显示的内容展现
     for(var i = 0;i<arr.length;i++){
      var option = new Option(arr[i],arr[i]);
      document.getElementById("content").options.add(option);
     }
    }
   };
  }
</script>

</head>

<body>
<select id="sort" οnchange="change()">
    <option vlaue="firut">水果</option>
    <option value="vagetable">蔬菜</option>
    </select><br>
    <br>
    <select id="content">
    <option></option>
    </select>
</body>
</html>

Servlet,ConnectServlet

public class ConnectServlet extends HttpServlet {

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

doPost(request,response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
//要调用的方法
  String method = request.getParameter("method");

  if("connect".equals(method))
   connect(request,response);
}

//联动方法
private void connect(HttpServletRequest request,
   HttpServletResponse response) {
//解决乱码
  response.setCharacterEncoding("utf-8");
  //看是蔬菜还是水果
  String sortName = request.getParameter("sortName");
  //根据sortName对数据库进行查询，返回不同数据，这里就不操作数据库了
  List list = new ArrayList();
  if("vagetable".equals(sortName)){
   list.add("黄瓜");
   list.add("番茄");
  }else{
   list.add("苹果");
   list.add("菠萝");
  }

  try {

   //向后台传数据的对象
   PrintWriter out = response.getWriter();
   //用json来存集合，需要导相关的jar包
   JSONObject json = new JSONObject();
   json.put("list", JSONArray.fromObject(list));
   System.out.println(json.toString());
   out.print(json.toString());
  } catch (IOException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }

}

}

PAOL

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
AJAX实现两个下拉框之间内容的联动

1.效果第一个下拉框选择蔬菜时，第二个联动显示黄瓜，番茄第一个下拉框选择水果时，第二个联动显示苹果，菠萝2.实现JSP页面，connect.jsp&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;&lt;%String path = request.getContextPath();String ba...
复制链接

扫一扫