Ajax二级联动
Posted 程序猿@Chen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax二级联动相关的知识，希望对你有一定的参考价值。
1 <%-- 2 Created by IntelliJ IDEA. 3 User: x1c 4 Date: 2019-12-22 5 Time: 10:04 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html> 10 <head> 11 <title>$Title$</title> 12 <script> 13 //function里面的参数如果写value 则获取不到 14 function fun1(val){ 15 var xhr= new XMLHttpRequest(); 16 xhr.open("GET","phoneServlet?val="+val,true) 17 xhr.onreadystatechange=function () { 18 //只有完成后才显示 19 if(xhr.readyState==4&&xhr.status==200){ 20 //获取响应的文本内容 21 var phone = xhr.responseText; 22 //包头不包尾 23 var phone3= phone.substring(1,phone.length-1) 24 25 var phone4 =phone3.split(", "); 26 27 var phone2= document.getElementById("p"); 28 //清空原有数据 29 phone2.innerHTML="<option >-请选择机型-</option>" 30 for(var i in phone4){ 31 phone2.innerHTML+="<option>"+phone4[i]+"</option>" 32 } 33 34 } 35 36 37 38 } 39 xhr.send(null) 40 } 41 42 </script> 43 </head> 44 <body> 45 <select onchange="fun1(this.value)"> 46 <option >-请选择手机品牌-</option> 47 <option value="1">华为</option> 48 <option value="2">小米</option> 49 <option value="3">oppo</option> 50 </select> 51 <select id="p"> 52 <option >-请选择机型-</option> 53 </select> 54 </body> 55 </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()); } }
以上是关于Ajax二级联动的主要内容，如果未能解决你的问题，请参考以下文章