Ajax_动态加载列表框

最新推荐文章于 2022-02-23 18:53:40 发布
最新推荐文章于 2022-02-23 18:53:40 发布
阅读量85 收藏
点赞数
分类专栏： Ajax技术应用 文章标签： Ajax AIR JSP Cache JavaScript ViewUI

JSP部分：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

   <title>My JSP 'index.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">
　　var xmlHttp;
　　function createXMLHttpRequest() {
   　　if (window.ActiveXObject) {
   　　   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   　　}
   　　else if (window.XMLHttpRequest) {
　　    xmlHttp = new XMLHttpRequest();
　　   }
　　}

　　function refreshModelList() {
   　　var make = document.getElementById("make").value;
   　　var modelYear = document.getElementById("modelYear").value;
   　　if(make == "" || modelYear == "") {
   　　   clearModelsList();
   　　   return;
　　   }
   　　var url = "RefreshModelListServlet?"+ createQueryString(make, modelYear) + "&ts=" + new Date().getTime();
   　　createXMLHttpRequest();
　　     xmlHttp.onreadystatechange = handleStateChange;
   　　xmlHttp.open("GET", url, true);
   　　xmlHttp.send(null);
　　}

　　function createQueryString(make, modelYear) {
   　　var queryString = "make=" + make + "&modelYear=" + modelYear;
   　　return queryString;
　　}

　　function handleStateChange() {
   　　if(xmlHttp.readyState == 4) {
    　　if(xmlHttp.status == 200) {
    　　   updateModelsList();
    　　}
   　　}
　　}

　　function updateModelsList() {
　　    clearModelsList();
   　　var models = document.getElementById("models");
   　　var results = xmlHttp.responseXML.getElementsByTagName("model");
   　　var option = null;
   　　for(var i = 0; i < results.length; i++) {
    　　option = document.createElement("option");
    　　option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
    　　models.appendChild(option);
   　　}
　 }

　　function clearModelsList() {
   　　var models = document.getElementById("models");
   　　while(models.childNodes.length > 0) {
   　　   models.removeChild(models.childNodes[0]);
   　　}
　　}
　　</script>
</head>
<body>
   <h1>
    Select Model Year and Make
   </h1>
   <form action="#">
    <span style="font-weight:bold;">Model Year:</span>
    <select id="modelYear" οnchange="refreshModelList();">
     <option value="">
      Select One
     </option>
     <option value="2006">
      2006
     </option>
     <option value="1995">
      1995
     </option>
     <option value="1985">
      1985
     </option>
     <option value="1970">
      1970
     </option>
    </select>
    <br />
    <br />
    <span style="font-weight:bold;">Make:</span>
    <select id="make" οnchange="refreshModelList();">
     <option value="">
      Select One
     </option>
     <option value="Chevrolet">
      Chevrolet
     </option>
     <option value="Dodge">
      Dodge
     </option>
     <option value="Pontiac">
      Pontiac
     </option>
    </select>
    <br />
    <br />
    <span style="font-weight:bold;">Models:</span>
    <br />
    <select id="models" size="6" style="width:300px;">
    </select>
   </form>
</body>
</html>

Servlet部分：

public class RefreshModelListServlet extends HttpServlet {

private static List<MakeModelYear> availableModels = new ArrayList();

public void init() throws ServletException {
   availableModels.add(new MakeModelYear(2006, "Dodge", "Charger"));
   availableModels.add(new MakeModelYear(2006, "Dodge", "Magnum"));
   availableModels.add(new MakeModelYear(2006, "Dodge", "Ram"));
   availableModels.add(new MakeModelYear(2006, "Dodge", "Viper"));
   availableModels.add(new MakeModelYear(1995, "Dodge", "Avenger"));
   availableModels.add(new MakeModelYear(1995, "Dodge", "Intrepid"));
   availableModels.add(new MakeModelYear(1995, "Dodge", "Neon"));
   availableModels.add(new MakeModelYear(1995, "Dodge", "Spirit"));
   availableModels.add(new MakeModelYear(1985, "Dodge", "Aries"));
   availableModels.add(new MakeModelYear(1985, "Dodge", "Daytona"));
   availableModels.add(new MakeModelYear(1985, "Dodge", "Diplomat"));
   availableModels.add(new MakeModelYear(1985, "Dodge", "Omni"));
   availableModels.add(new MakeModelYear(1970, "Dodge", "Challenger"));
   availableModels.add(new MakeModelYear(1970, "Dodge", "Charger"));
   availableModels.add(new MakeModelYear(1970, "Dodge", "Coronet"));
   availableModels.add(new MakeModelYear(1970, "Dodge", "Dart"));
   availableModels.add(new MakeModelYear(2006, "Chevrolet", "Colorado"));
   availableModels.add(new MakeModelYear(2006, "Chevrolet", "Corvette"));
   availableModels.add(new MakeModelYear(2006, "Chevrolet", "Equinox"));
   availableModels.add(new MakeModelYear(2006, "Chevrolet", "Monte Carlo"));
   availableModels.add(new MakeModelYear(1995, "Chevrolet", "Beretta"));
   availableModels.add(new MakeModelYear(1995, "Chevrolet", "Camaro"));
   availableModels.add(new MakeModelYear(1995, "Chevrolet", "Cavalier"));
   availableModels.add(new MakeModelYear(1995, "Chevrolet", "Lumina"));
   availableModels.add(new MakeModelYear(1985, "Chevrolet", "Cavalier"));
   availableModels.add(new MakeModelYear(1985, "Chevrolet", "Chevette"));
   availableModels.add(new MakeModelYear(1985, "Chevrolet", "Celebrity"));
   availableModels.add(new MakeModelYear(1985, "Chevrolet", "Citation II"));
   availableModels.add(new MakeModelYear(1970, "Chevrolet", "Bel Air"));
   availableModels.add(new MakeModelYear(1970, "Chevrolet", "Caprice"));
   availableModels.add(new MakeModelYear(1970, "Chevrolet", "Chevelle"));
   availableModels.add(new MakeModelYear(1970, "Chevrolet", "Monte Carlo"));
   availableModels.add(new MakeModelYear(2006, "Pontiac", "G6"));
   availableModels.add(new MakeModelYear(2006, "Pontiac", "Grand Prix"));
   availableModels.add(new MakeModelYear(2006, "Pontiac", "Solstice"));
   availableModels.add(new MakeModelYear(2006, "Pontiac", "Vibe"));
   availableModels.add(new MakeModelYear(1995, "Pontiac", "Bonneville"));
   availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Am"));
   availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Prix"));
   availableModels.add(new MakeModelYear(1995, "Pontiac", "Firebird"));
   availableModels.add(new MakeModelYear(1985, "Pontiac", "6000"));
   availableModels.add(new MakeModelYear(1985, "Pontiac", "Fiero"));
   availableModels.add(new MakeModelYear(1985, "Pontiac", "Grand Prix"));
   availableModels.add(new MakeModelYear(1985, "Pontiac", "Parisienne"));
   availableModels.add(new MakeModelYear(1970, "Pontiac", "Catalina"));
   availableModels.add(new MakeModelYear(1970, "Pontiac", "GTO"));
   availableModels.add(new MakeModelYear(1970, "Pontiac", "LeMans"));
   availableModels.add(new MakeModelYear(1970, "Pontiac", "Tempest"));
}

public void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
    this.doPost(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
    processRequest(request, response);
}

protected void processRequest(HttpServletRequest request,
    HttpServletResponse response) throws ServletException, IOException {
   response.setContentType("text/html;charset=UTF-8");
   int modelYear = Integer.parseInt(request.getParameter("modelYear"));
   String make = request.getParameter("make");
   StringBuffer results = new StringBuffer("<models>");
   MakeModelYear availableModel = null;
   for (Iterator it = availableModels.iterator(); it.hasNext();) {
    availableModel = (MakeModelYear) it.next();
    if (availableModel.modelYear == modelYear) {
     if (availableModel.make.equals(make)) {
      results.append("<model>");
      results.append(availableModel.model);
      results.append("</model>");
     }
    }
   }
   results.append("</models>");
   response.setContentType("text/xml");
   response.getWriter().write(results.toString());
}


private static class MakeModelYear {
   private int modelYear;

   private String make;

   private String model;

   public MakeModelYear(int modelYear, String make, String model) {
    this.modelYear = modelYear;
    this.make = make;
    this.model = model;
   }
}

}

fsgsdfghdfh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML的select的ajax中js回显
qq_39088110的博客
08-14 531
碰到了一个大坑 在网上找了根据value将select标签下option回显，网上找了好多，之前也有自己写对的，在这个新页面上就是不起作用，后来发现ajax要回显，必须在success里边用js回显，在外面无效。这谁能想到？ function showAuthority(data1,data2) { $.ajax({ url: 'http://localhost:8888/demo/authority/find', type: 'POST',
ajax中select选择框的使用
terran_li2005的博客
06-02 146
dynamicLists.html: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&l
实现 ajax 多项选择框
omygege
07-12 146
转载请注明出处!! 在用户体验方面ajax可谓功不可漠,怎样才能很好的利用当前开源的插件来实现我们的功能呢? 这就要求我们要了解国外的开源组织,他们的插件都比较成熟. 这不又遇到了一个ajax多项选择框的实现.感觉挺不错的.下面和大家分享一下. js: &lt;script language="javascript" type="text/javascript" src="arc90_m...
Ajax生成选择框,通过AJAX更新选择框
weixin_29775479的博客
08-05 161
当我尝试通过AJAX更新整个选择框时，只能第一次运行。在PHP方面，总是发送相同的信息，一次选项字段被禁用和其他时间选择。通过AJAX更新选择框更换整个选择框时是否存在一些问题？这里是JS代码。$(document).ready(function(){$("select").change(function() {tid=location.href.replace(/^.*\/|\.[^.]*$/g...
AJAX经典应用之动态加载列表框
NonShan的专栏
11-07 1005
动态加载列表框在许多场景中都需要用到。 比如说当用户选择了n
ajax动态加载列表框
06-15
本文将深入探讨“Ajax动态加载列表框”的概念、实现方式以及相关知识点。 Ajax动态加载列表框，简单来说，就是利用Ajax技术来实现在用户交互时动态更新下拉选择框（Select Box）中的选项，而无需整个页面刷新。这种...
动态加载下拉列表框
03-30
在IT领域，动态加载下拉列表框是一种常见的交互设计，特别是在网页或应用程序中。它允许用户从一个可扩展的选项列表中进行选择，而这些选项可能不会一次性全部显示，而是根据用户的操作动态加载。这种技术提高了用户...
ajaxcc(动态加载列表框).rar
03-17
在"ajaxcc(动态加载列表框)"这个项目中，我们关注的是如何利用Ajax来实现动态加载下拉列表框的内容。动态加载列表框是一种常见的交互设计，它能够在用户滚动或选择某个选项时，根据需求动态地从服务器获取并显示新的...
Ajax+PHP实现的分类列表框功能示例
10-17
在本示例中，我们探讨了如何使用Ajax和PHP来实现一个动态的分类列表框功能。这个功能的主要目的是提供一种用户友好的方式，使用户在选择商品类别时能够实时查看和选择子类别，无需刷新整个页面。以下是实现这一功能...
AJAX实现的动态下拉列表框例子
03-05
在网页设计中，动态下拉列表框...总结来说，AJAX实现的动态下拉列表框利用了异步通信的能力，提升了用户体验，使网页更加互动和高效。开发者需要掌握JavaScript、DOM操作以及服务器端编程技术，才能成功实现这一功能。
Ajax-联动选择框
莫轮_小锐 的专栏
07-13 409
任务：完成功能，当上一个Select1选择后，下一个Select2联动显示相应的选择项 流程：    1、在Select1后，加上onChange属性，指向javaScript方法changeType()    2、在要显示select2的地方加上标记，并赋id值 请先选择文件类型    3、Controller层定义方法 @ResponseBody /
ajax动态添加列表数据,Jquery+Ajax实现Select动态添加数据
weixin_39663729的博客
08-05 309
【Machine Learning】决策树案例：基于python的商品购买能力预测系统决策树在商品购买能力预测案例中的算法实现 作者:白宁超 2016年12月24日22:05:42 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本 ...java中集合类中Collection接口中的Map接口的常用方法熟悉1:Map接口提供了将键映射到值的对...
ajax下拉选择框
johncools的博客
09-18 1490
下载地址：http://www.cnblogs.com/Files/lxxnet/ajaxselect.rar如果有不幸中毒的朋友请到下面的地址，下载卡巴6,KEY可以用到2007-07http://www.cnblogs.com/lxxnet/articles/478739.html效果图如下:演示地址:由于有恶意程序，所以去掉地址以前做的第一个版本是为了偷懒,数据量大时就不能用了,也不怎么通用
ajax 中应用select的使用
guanghuilove的专栏
12-20 498
所有分行                             ${organization.orgName}                                                   所有经纪人                             ${portalEmployee.userNameCn}
ajax复选框的选中添加
weixin_30781631的博客
12-20 448
VIEW（）视图里的 转载于:https://www.cnblogs.com/liuziyang1/p/10151892.html
Ajax 应用模板(动态加载列表框)
hkmexu的专栏
10-13 145
&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;&lt;%@ page contentType="text/html; charset=UTF-8"%&gt; &lt;head&gt;            &lt;META http-equiv=Content-Type
ajax提交select数据,通过Ajax方式绑定select选项数据的实例
weixin_39823200的博客
08-06 535
今天小编就为大家分享一篇通过Ajax方式绑定select选项数据的实例，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。问题描述在编写Web页面的时候常常需要在后端取出数据动态放入select标签中，以供选择。解决办法在HTML代码段中只需写入--请选择--在JavaScript代码段中写入以下ajax取数据并绑定数据的过程$.ajax({type : "post"...
web.net中使用ajax动态加载数据——table和图表实例
susan的博客
02-23 801
本人因工作需要，需要实现页面的局部刷新功能，在网上找了很多资料都不是很完整，本人自己结合网上资料和自己经验多次实验写了一个，在这里记录一下，方便以后查阅。 1.绑定table实例 1.引用工具：Newtonsoft.Json.dll 2.下载Newtonsoft.Json.dll：https://www.cnblogs.com/youmeng/p/4874897.html，如下图 实现table数据的自动刷新 aspx页面代码： <%@ Page Language="C#" AutoEventWi
ajax动态绑定下拉列表框
最新发布
02-28
在使用Ajax动态绑定下拉列表框时，可以通过异步请求获取数据，并将数据填充到下拉列表框中。以下是一种常见的实现方式： 1. 在前端页面中，定义一个下拉列表框的HTML元素，例如： ```html <select id="mySelect"></select> ``` 2. 使用JavaScript代码，通过Ajax发送异步请求获取数据，并将数据填充到下拉列表框中。例如，使用jQuery的Ajax方法： ```javascript $(document).ready(function(){ $.ajax({ url: "data.php", // 后端接口地址，用于获取数据 type: "GET", // 请求类型，可以是GET或POST dataType: "json", // 数据类型，这里使用JSON格式 success: function(data){ var select = $("#mySelect"); // 获取下拉列表框元素 select.empty(); // 清空下拉列表框 $.each(data, function(key, value){ select.append("<option value='" + key + "'>" + value + "</option>"); // 添加选项 }); } }); }); ``` 3. 在后端服务器上，实现一个接口用于返回数据。例如，使用PHP语言实现一个data.php文件： ```php <?php $data = array( "1" => "选项1", "2" => "选项2", "3" => "选项3" ); echo json_encode($data); ?> ``` 这样，当页面加载完成时，会发送Ajax请求到data.php接口获取数据，并将数据填充到下拉列表框中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值