`

Ajax 模拟动态列表

阅读更多

three.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>index.html</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=GBK">
        <script type="text/javascript">
        var xmlhttp;
        function loadXMLDoc(valueFromSelect1){
            var url = "three.jsp?valueFromSelect=" + valueFromSelect1 + "&" + Math.random();
            alert(url);
            xmlhttp=null;
            if (window.XMLHttpRequest){
              xmlhttp=new XMLHttpRequest();
            }
            else if (window.ActiveXObject){
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (xmlhttp!=null){
              xmlhttp.onreadystatechange=updatePage;
              xmlhttp.open("GET",url,true);
              xmlhttp.send(null);
            }
            else{
              alert("Your browser does not support XMLHTTP.");
            }
        }
        
        function state_Change(){
            if (xmlhttp.readyState==4){
                if (xmlhttp.status==200){
                    updatePage();
                }
                else{
                    alert("Problem retrieving XML data");
                }
            }
        }
        
        function updatePage(){            
            // 清空select2
            while(select2.options[0] != null){
                select2.options[0] = null;
            }
            
            // 设置select2
            var xmlDoc = xmlhttp.responseXML;
            alert(xmlDoc);
            var labelValueBeanElements = xmlDoc.getElementsByTagName("labelValueBean");
          
            for (var i = 0; i < labelValueBeanElements.length; i++){
                var entityValue = xmlDoc.getElementsByTagName("value")[i].childNodes[0].nodeValue;
                var entityLabel = xmlDoc.getElementsByTagName("label")[i].childNodes[0].nodeValue;
                select2.options[i] = new Option(entityLabel,entityValue,false,false);
            }
        }
        </script>
    </head>

    <body>
        select1:
        <select id="select1" onchange="loadXMLDoc(this.value)">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
        <br/>
        select2:
        <select id="select2">
        </select>
        <input type="button" value="显示select2的值" onclick="alert(select2.value)">
    </body>
</html>






three.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
 <%!
	private String fromDB (String valueFromSelect)  {
        StringBuffer sb = new StringBuffer();

        if (valueFromSelect.equals("1")) {
            sb.append("    <labelValueBean>\n");
            sb.append("        <value>haha</value>\n");
            sb.append("        <label>哈哈</label>\n");
            sb.append("    </labelValueBean>\n");
            sb.append("    <labelValueBean>\n");
            sb.append("        <value>hehe</value>\n");
            sb.append("        <label>呵呵</label>\n");
            sb.append("    </labelValueBean>\n");
        } else if (valueFromSelect.equals("2")) {
            sb.append("    <labelValueBean>\n");
            sb.append("        <value>heihei</value>\n");
            sb.append("        <label>嘿嘿</label>\n");
            sb.append("    </labelValueBean>\n");
            sb.append("    <labelValueBean>\n");
            sb.append("        <value>gaga</value>\n");
            sb.append("        <label>嘎嘎</label>\n");
            sb.append("    </labelValueBean>\n");
            sb.append("    <labelValueBean>\n");
            sb.append("        <value>woyun</value>\n");
            sb.append("        <label>我晕</label>\n");
            sb.append("    </labelValueBean>\n");
            sb.append("    <labelValueBean>\n");
            sb.append("        <value>123</value>\n");
            sb.append("        <label>456</label>\n");
            sb.append("    </labelValueBean>\n");
        }
        return sb.toString();
    }

%>
<%
	String valueFromSelect = request.getParameter("valueFromSelect");

	StringBuffer sb = new StringBuffer();
	sb.append("<?xml version=\"1.0\" encoding=\"gb2312\"?>\n");
	sb.append("<resultFromDB>\n");
	sb.append(fromDB(valueFromSelect));
	sb.append("</resultFromDB>\n");
	response.setHeader("content-type", "text/xml;charset=GBK");
	System.out.println(sb);
	out.println(sb.toString());
	//out.flush();
	out.close();
	
	%>
分享到:
评论

相关推荐

    ajax模拟 登陆及判断用户名

    总结来说,实现Ajax模拟登录及判断用户名的功能,需要前端通过JavaScript(如jQuery)发起Ajax请求,后端使用.Net Web API接收并处理请求,再将结果返回给前端。这一过程中,Ajax起到了关键作用,实现了无刷新的交互...

    Java 模拟Ajax POST GET 提交代码

    Java 模拟Ajax POST GET 提交代码,实测很好用。

    ajax模拟百度自动下拉提示框

    本项目名为“ajax模拟百度自动下拉提示框”,其目的是实现一个与百度搜索类似的实时下拉提示功能,为用户提供便捷的模糊查询体验。这个功能广泛应用于各种搜索引擎和输入框,能大大提高用户在输入时的效率。下面将...

    ajax 模拟购物车加入货物并

    本项目通过使用AJAX模拟购物车添加商品,并利用Servlet处理后台请求,以及jQuery库简化前端操作,实现了页面的异步刷新来展示添加的商品。 首先,我们需要理解AJAX的工作原理。AJAX允许前端通过JavaScript发送异步...

    Ajax+JSON 模拟谷歌搜索页面

    **Ajax+JSON 模拟谷歌搜索页面** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现异步更新。JSON...

    servlet+ajax模拟百度搜索(含jar包)

    【Servlet+Ajax模拟百度搜索】是一项利用Web技术实现的简易搜索功能,主要涉及Servlet和Ajax技术,不依赖数据库。在本项目中,我们通过Ajax异步请求与Servlet后台交互,模拟百度搜索时用户输入关键词后实时展示建议...

    使用ajax模拟用户名是否被占用

    "使用Ajax模拟用户名是否被占用"这一技术,正是为了提升用户体验而设计的。它允许用户在输入用户名时即时检查该用户名是否已被其他用户注册,无需每次输入后都提交整个表单进行验证。这种方式可以减少用户的等待时间...

    AJAX股票模拟源代码

    在本项目中,"AJAX股票模拟源代码"是一个用于教学和实践的示例,旨在帮助开发者深入理解如何利用AJAX技术以及MVC(Model-View-Controller)设计模式来构建一个股票模拟应用。 MVC模式是一种软件设计模式,它将应用...

    原生ajax模拟判断用户名是否已注册

    以下是对"原生ajax模拟判断用户名是否已注册"这一主题的详细解释。 首先,我们需要理解什么是Ajax。AJAX (Asynchronous JavaScript and XML) 不是单一的技术,而是一种使用现有技术(如JavaScript、XML、HTML和CSS...

    php: curl模拟ajax登陆53后台的类文件

    模拟ajax(post)登陆53客服后台,一个输入账号和加密后的密码就可以获取联系的总记录数

    JQuery+ajax+mock.js模拟注册

    实现JQuery+ajax+mock.js模拟注册,判断输入框是否输入正确

    页面加载中(遮罩层支持ajax、模拟查询、模拟保存、模拟导入、模拟隐藏、模拟刷新、全屏遮罩、兼容ie、谷歌、火狐等浏览器)2016.09.13.zip

    模拟隐藏和刷新则是对页面元素的动态控制,使得页面状态更加流畅。 4. **全屏遮罩**:全屏遮罩是指遮罩层覆盖整个屏幕,而非仅覆盖特定区域。它在需要用户全神贯注等待某个操作完成,或者在整个页面更新时特别有用...

    Iframe模拟Jquery.Ajax

    通过深入理解这些知识点,并结合提供的"Iframe模拟Ajax-经典"压缩包中的代码示例和文档,你可以更有效地掌握如何在面临同源策略限制时,使用Iframe来模拟Ajax请求,实现跨域数据交互。这将有助于你在开发过程中解决...

    用AJAX实现google输入自动完成的简单模拟

    这里,`#txtCompanyName` 是用户输入文本的地方,而 `#divContent` 用于展示根据用户输入动态生成的建议列表。 #### 2. 使用 JavaScript 处理用户输入 接下来,我们使用 JavaScript 来处理用户的输入事件,并发送 ...

    Ajax模拟面试试题

    Ajax,全称Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。Ajax在面试中常常是考察的重点,因为它涉及到前端开发的核心能力,包括异步通信、DOM操作、JavaScript...

    基于jsp+servlet+Ajax异步登陆模拟web项目

    【基于jsp+servlet+Ajax异步登陆模拟web项目】是一个典型的Web开发实例,它整合了三种核心技术:JavaServer Pages(JSP)、Servlet以及Asynchronous JavaScript and XML(Ajax)。这个项目的核心目的是实现用户登录...

    ajax数据获取及渲染

    在描述中提到"模拟ajax调接口",这可能指的是在本地环境中模拟API调用。`data.json`文件可能是模拟的接口返回的数据。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于...

Global site tag (gtag.js) - Google Analytics