- <%--
- Created by IntelliJ IDEA.
- User: x1c
- Date: 2019-12-22
- Time: 10:04
- To change this template use File | Settings | File Templates.
- --%>
- <%@ page contentType="text/html;charset=UTF-8" language="java" %>
- <HTML>
- <head>
- <title>$Title$</title>
- <script>
- //function 里面的参数如果写 value 则获取不到
- function fun1(val){
- var xhr= new XMLHttpRequest();
- xhr.open("GET","phoneServlet?val="+val,true)
- xhr.onreadystatechange=function () {
- // 只有完成后才显示
- if(xhr.readyState==4&&xhr.status==200){
- // 获取响应的文本内容
- var phone = xhr.responseText;
- // 包头不包尾
- var phone3= phone.substring(1,phone.length-1)
- var phone4 =phone3.split(",");
- var phone2= document.getElementById("p");
- // 清空原有数据
- phone2.innerHTML="<option>- 请选择机型 -</option>"
- for(var i in phone4){
- phone2.innerHTML+="<option>"+phone4[i]+"</option>"
- }
- }
- }
- xhr.send(null)
- }
- </script>
- </head>
- <body>
- <select onchange="fun1(this.value)">
- <option>- 请选择手机品牌 -</option>
- <option value="1"> 华为 </option>
- <option value="2"> 小米 </option>
- <option value="3">oppo</option>
- </select>
- <select id="p">
- <option>- 请选择机型 -</option>
- </select>
- </body>
- </HTML>
- package com.bj;
- 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.List;
- @WebServlet("/phoneServlet")
- public class PhoneServlet extends HttpServlet {
- @Override
- protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
- String value = req.getParameter("val");
- List<String> Phone = new ArrayList<String>();
- if(value.equals("1")){
- Phone.add("HAWEIMATE9 PRO");
- Phone.add("HAWEIMATE10 PRO");
- Phone.add("HAWEIMATE20 PRO");
- } else if("2".equals(value)){
- Phone.add("小米 4");
- Phone.add("小米 8");
- Phone.add("小米 2s");
- } else if("3".equals(value)){
- Phone.add("OPPOX");
- Phone.add("OPPOXx");
- Phone.add("OPPOXxx");
- }
- resp.setCharacterEncoding("UTF-8");
- resp.setContentType("text/html;charset=UTF-8");
- // 集合的输处格式
- resp.getWriter().print(Phone.toString());
- }
- }
来源: http://www.bubuko.com/infodetail-3344123.html