Ajax二级联动

2019-12-22 11:00:09 阅读：200 来源： 互联网

标签：二级 xhr add Phone Ajax 联动 var import servlet

 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());
    }
}

标签：二级,xhr,add,Phone,Ajax,联动,var,import,servlet
来源： https://www.cnblogs.com/9797ch/p/12079232.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Ajax二级联动