1、在HTML中,有这样一个表单:
<form method="post" name="searchform" id="searchform" method="/sek.go">
<input name="query" value="" type="text" id="query" />
<input type=”submit” value="查询"></input>
</form>
当然,要想在HTML中使用Js功能,必须在<head/>中加入
<script type="text/javascript"src="/style/js/ajax.js"></script>
2、然后在ajax.js文件中加入如下代码
function userSearch(){
var query = $("#searchform input[@name='query']").val();
$.post("/userSearch.htm", { query: query } ,function callback(json){
var userlist = $.parseJSON(json);
userList(userlist);
});
}
解释如下:
1)、"#searchform input[@name='query']";的意思是: 选择id为searchform其下的(name属性值为’query’的)input标签
2)、$(“”).val()意为要得到(“”)所选中属性的值;
3)、在$.post()中,第一项参数是指定目标servlet,即要把本post请求发给的那个servlet。
第二项是本post请求所携带的数据;“:”前的为key或者name,后为value;
第三项是回调函数,其内若有形参,则表示要对从servlet返回的值进行处理,这里的callback的功能是将JSON对象json转换成了JS对象userlist,然后将JS对象传入函数userList
3、post请求携带了名为query的参数去了后台,在servlet中进行处理:
//从名为"query"能的参数中取出post带过来的数据
String query = request.getParameter("query");
if (query != null && !query.isEmpty()
&& !query.trim().equalsIgnoreCase("")) {
//如果"query"的值不为空,就用'query'为参数构建HQL语句
String hql = "from TUser as user where user.userName like '"+ query + "%'";
//到库表TUser中进行查询,并得到一个表结构
List list = weilav3TUserDAO.getListByHQL(hql);
if (list != null && !list.isEmpty()) {
//若list不为空,则将其转换成JSON对象,并存入jsonArray中
JSONArray jsonArray = JSONArray.fromObject(list);
//下面就是把存有查询结果的JSON对象返给页面
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(jsonArray);
……
}else {……}
分享到:
相关推荐
结合以上技术,一个简单的SSH+JQuery+JSON例子可能包含以下步骤: 1. 用户通过前端页面发送Ajax请求,请求由JQuery发起,数据格式为JSON。 2. Struts框架接收到请求,通过Action转发到Spring控制层。 3. Spring控制...
在Web开发领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。关于"jQuery读取json数据"这个主题,我们将会深入探讨如何利用jQuery的Ajax功能来高效地加载和解析JSON格式的数据...
**jQuery 操作 JSON 的例子** 在 Web 开发中,JSON(JavaScript Object Notation)作为一种轻量级的数据交换格式,被广泛用于前后端交互。jQuery,一个流行的 JavaScript 库,提供了简单易用的 API 来处理 JSON ...
总结来说,这个综合例子展示了如何结合使用AJAX、jQuery和JSON,实现从服务器获取数据并在客户端动态呈现,尤其适合实时更新数据的场景,例如实时股票报价、天气预报等。熟练掌握这些技术对于任何Web开发者来说都是...
在jQuery中,如果你接收到一个JSON格式的响应,你可以使用`$.parseJSON()`来解析它: ```javascript $.ajax({ url: 'http://example.com/api/data', dataType: 'json', success: function(data) { var parsed...
这个压缩包文件中的例子涵盖了Ajax、jQuery和JSON的基础使用,从简单的GET请求到复杂的异步数据交互,对于初学者来说是非常宝贵的资源。通过学习和实践这些例子,你可以更好地理解和掌握如何使用Ajax和jQuery来创建...
Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON
这个"Struts2 JQueryJson例子 .rar"压缩包很可能是包含了一个实际的项目实例,演示了如何在Struts2框架中利用JQuery和JSON进行数据交互。下面将详细讲解Struts2、JQuery和JSON的相关知识点: 1. **Struts2框架**: ...
**jQuery + JSON 小例子详解** 在Web开发中,jQuery 和 JSON 都是不可或缺的工具。jQuery 是一个轻量级的JavaScript库,极大地简化了DOM操作、事件处理、动画效果和Ajax交互。JSON(JavaScript Object Notation)则...
总结一下,这个例子展示了如何使用jQuery的AJAX功能与服务器进行通信,获取JSON数据并在前端处理和展示。通过这种方式,我们可以实现动态的、无刷新的用户体验,这是现代Web应用程序不可或缺的一部分。理解并熟练...
在这个示例中,可能有一个HTML页面,它使用jQuery来触发一个Ajax请求,请求的目标是一个服务器端的接口,该接口返回JSON数据。例如,当用户点击某个按钮时,可能会有如下代码: ```javascript $("#btnAjax").click...
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它采用完全独立于语言的文本格式,但也使用了类似于C家族语言的习惯,包括C、C++、C#、Java、JavaScript、Perl、Python等。JSON易于人阅读和编写,...
如果jQuery异步请求(例如`$.ajax`、`$.get`或`$.post`)设置了`dataType`参数为"json",或者使用`$.getJSON()`方法,jQuery会自动将响应数据解析为JavaScript对象,无需使用`eval()`。这是更安全且推荐的做法。...
本人折腾了两天才探索出来的, 程序简单,客服端通过jquery的getJSON函数请求PHP服务端,服务端返回一个二维数组,客户端把结果经简单处理打印出来。此例非常经典,初学者看了可以少走很多弯路(因为那些弯路我帮你...
本文将详细介绍如何利用jQuery来实现与JSON和AJAX的有效结合,并通过一个具体的例子来展示其实际应用。 #### 二、基础知识简介 ##### 2.1 jQuery简介 jQuery是一款快速、简洁的JavaScript库,它极大地简化了HTML...
下面通过一个具体的例子来说明如何使用JQuery处理跨域JSON请求: 假设我们有一个API,其返回的数据如下: ```json { "success": [ {"id": 1, "title": "title1"}, {"id": 2, "title": "title2"}, {"id": 3, ...
在这个"struts2+jquery+json"的小例子中,我们可能会看到以下几个关键知识点: 1. **Struts2框架**: - **Action和Result**:Struts2的核心组件,Action负责业务逻辑处理,Result负责控制页面跳转。 - **...
总结来说,这个例子展示了如何利用Struts2处理后端业务逻辑,使用JSON作为数据交换格式,以及通过jQuery在前端实现动态更新和与服务器的异步通信。了解和掌握这三个工具的整合使用,对于提升Web开发效率和用户体验...
在"jquery ajax json struts2最简单例子测试成功"的项目中,我们可以推断出以下几个关键点: 1. **整合jQuery与AJAX**:项目中可能使用jQuery的$.ajax()方法来发送异步请求。$.ajax()提供了一种方式,通过HTTP GET...