先说明下我的问题:
我想做一个仿Google Suggest的搜索框,输入keyWord时会返回一些数据,再显示到搜索框的下方的div中。
我已经成功获取的返回的数据,可是我不知道怎样将数据按照一定的格式显示到网页中。
这是我js里面的代码
function search() {
var jqueryObj = $("#txtSearch");
var searchStr = jqueryObj.val();
$.get("SearchSuggest?search=" + searchStr, null, callback);
}
function callback(data) {
var jqueryObj = $(data);
var resultObj = $("#search_suggest");
resultObj.empty();
var str = data.split("\n");
}
截两张图:
输入“刘”字
用firebug查看:
服务器返回的数据是String类型的并且以"\n"做为分隔符。
下面一段是servlet中的代码:
vData = ss.search(search);
StringBuffer buf = new StringBuffer();
for (int i = 0; i < vData.size(); i++) {
String keyWord = (String) vData.get(i);
buf.append(keyWord + "\n");
}
System.out.println(buf.toString());
输出的数据截图
- 大小: 3.7 KB
- 大小: 15.4 KB
- 大小: 24.4 KB
分享到:
相关推荐
jQuery中的AJAX请求是一种非常常见的前端异步数据交互方式,它的作用是使得页面无需重新加载即可向服务器请求数据,并将数据动态地加载到页面中。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它...
实际上,我们可以在 Ajax 返回数据并 `innerHTML` 到模板之前先把 `<div>` 中的 JavaScript 取出并写到模板页面的 `<head>` 中让浏览器解析。这样就相当于在打开模板页面的同时加载了所有 `<div>` 标签需要的 ...
在这个项目中,我们将结合HTML和AJAX,通过C#后端代码来从数据库获取数据,并将其动态地显示在网页上,实现页面的局部刷新。 首先,我们需要理解HTML的基础结构。一个简单的HTML页面通常包括`<!DOCTYPE html>`声明...
首先,让我们了解Ajax的核心概念,然后详细分析JqChart库的使用,以及如何将从服务器获取的数据整合到图表中。 **Ajax(异步JavaScript和XML)**是一种在无需重新加载整个网页的情况下更新部分网页的技术。通过在...
- 客户端接收到服务器端返回的JSON数据后,可以使用`eval`函数将其解析成JavaScript对象。 - 解析后的数据可以方便地被JavaScript程序访问和使用。 #### 四、代码详解 1. **HTML结构**: - 页面包含一个按钮,...
前端JavaScript根据响应更新页面,移除对应的数据显示,同时给出操作结果的提示。 **文件jb51.net** 在提供的文件名称“jb51.net”中,虽然没有明确指出具体内容,但通常这种格式的文件可能是网页教程或者示例代码...
通过本文的介绍,可以了解到使用php和jQuery ajax技术实现网页数据实时刷新显示的基本方法和步骤。技术实现的重点在于后端php脚本的编写,以及前端JavaScript和ajax的使用。同时,数据库的操作也是实现本功能不可或...
这通常涉及到查看网页源代码、使用开发者工具(如Chrome DevTools)的网络面板,查找相关的Ajax请求。一旦找到请求的URL、HTTP方法(GET或POST)以及可能需要的参数,我们就可以在C#中构造相应的请求。 以下是一个...
AJAX(Asynchronous JavaScript and XML)则是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在数据分页场景中,AJAX用于异步地从服务器获取分页数据,而无需重新加载整个页面。 分页插件如...
总结来说,使用Ajax和JavaScript,我们可以动态获取和处理服务器数据,然后通过操作DOM显示在网页上,甚至可以进一步实现网页内容的打印。这大大增强了Web应用的交互性和功能,使得用户无需离开当前页面就能获取和...
Ajax返回字符串是Ajax交互过程中一个常见的场景,它涉及到JavaScript、HTTP请求和响应处理等多个方面。以下是对这个主题的详细解释: 一、Ajax基础 Ajax的核心是JavaScript对象XMLHttpRequest,它允许在后台与...
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种创建动态网页的技术,允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。Ajax的核心是通过JavaScript来实现局部刷新...
最后,通过responseText或responseXML属性获取服务器返回的数据。 对于读取本地文本文档,由于浏览器的安全限制,直接使用AJAX无法访问本地文件系统。因此,我们需要使用HTML5的File API来实现这一功能。用户通常...
在实际应用中,我们还可以使用现成的库如jQuery的$.ajax()或现代的fetch API简化AJAX操作,同时结合前端框架(如React、Vue或Angular)的虚拟DOM特性,高效地更新大量数据显示在网页上。 总结起来,JS从PHP获取数据...
在网页开发中,Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许在不刷新整个页面的情况下,与服务器交换数据并更新部分网页内容。本主题主要关注如何使用Ajax来控制div窗口的显示和隐藏,...
`XMLHttpRequest`对象是Ajax的基础,它提供了一种在后台与服务器交换数据并更新部分网页的能力。以下是一些关键的方法和属性: 1. **open()**:初始化一个请求,参数包括请求类型(GET或POST)、URL和是否异步。 2....
我们通过ajax请求,向后台传递参数,然后后台经过一系列的运算之后向前台返还数据,我希望在等待数据成功返还之前可以展示一个...接下来通过本文给大家分享Ajax返回数据之前的loading等待效果,需要的朋友可以参考下
Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许我们在不刷新整个页面的情况下从服务器获取数据并更新部分网页内容。 首先,我们需要了解Ajax的核心组件。在本例中,我们有两个主要的ASP...
根据返回数据中字段SuccessCode的值,执行不同的业务逻辑,如禁用按钮、改变按钮样式和显示不同的提示信息等。 知识点五:JSON数据类型 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读...
6. **DOM更新**:最后,JavaScript更新DOM树,将接收到的数据显示在网页的相应位置,无需整个页面刷新。 以压缩包中的`ajaxDemo`为例,这个示例可能包含了一个简单的AJAX调用Servlet的例子。前端可能有一个...