`
jayyanzhang2010
  • 浏览: 377881 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jQuery使用JSON的例子

阅读更多
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例子

    结合以上技术,一个简单的SSH+JQuery+JSON例子可能包含以下步骤: 1. 用户通过前端页面发送Ajax请求,请求由JQuery发起,数据格式为JSON。 2. Struts框架接收到请求,通过Action转发到Spring控制层。 3. Spring控制...

    jQuery读取json数据

    在Web开发领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。关于"jQuery读取json数据"这个主题,我们将会深入探讨如何利用jQuery的Ajax功能来高效地加载和解析JSON格式的数据...

    JQuery操作json的例子

    **jQuery 操作 JSON 的例子** 在 Web 开发中,JSON(JavaScript Object Notation)作为一种轻量级的数据交换格式,被广泛用于前后端交互。jQuery,一个流行的 JavaScript 库,提供了简单易用的 API 来处理 JSON ...

    AJAX+JQuery+JSON的综合例子

    总结来说,这个综合例子展示了如何结合使用AJAX、jQuery和JSON,实现从服务器获取数据并在客户端动态呈现,尤其适合实时更新数据的场景,例如实时股票报价、天气预报等。熟练掌握这些技术对于任何Web开发者来说都是...

    Jquery.json.js

    在jQuery中,如果你接收到一个JSON格式的响应,你可以使用`$.parseJSON()`来解析它: ```javascript $.ajax({ url: 'http://example.com/api/data', dataType: 'json', success: function(data) { var parsed...

    ajax,jQuery 例子大全,json例子

    这个压缩包文件中的例子涵盖了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 Jquery JSON

    Struts2 JQueryJson例子 .rar

    这个"Struts2 JQueryJson例子 .rar"压缩包很可能是包含了一个实际的项目实例,演示了如何在Struts2框架中利用JQuery和JSON进行数据交互。下面将详细讲解Struts2、JQuery和JSON的相关知识点: 1. **Struts2框架**: ...

    jquery+json小例子

    **jQuery + JSON 小例子详解** 在Web开发中,jQuery 和 JSON 都是不可或缺的工具。jQuery 是一个轻量级的JavaScript库,极大地简化了DOM操作、事件处理、动画效果和Ajax交互。JSON(JavaScript Object Notation)则...

    jquery ajax json 的例子

    总结一下,这个例子展示了如何使用jQuery的AJAX功能与服务器进行通信,获取JSON数据并在前端处理和展示。通过这种方式,我们可以实现动态的、无刷新的用户体验,这是现代Web应用程序不可或缺的一部分。理解并熟练...

    jquery+ajax+json例子

    在这个示例中,可能有一个HTML页面,它使用jQuery来触发一个Ajax请求,请求的目标是一个服务器端的接口,该接口返回JSON数据。例如,当用户点击某个按钮时,可能会有如下代码: ```javascript $("#btnAjax").click...

    json + struts2 + 80个JQuery 效果 个例子

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它采用完全独立于语言的文本格式,但也使用了类似于C家族语言的习惯,包括C、C++、C#、Java、JavaScript、Perl、Python等。JSON易于人阅读和编写,...

    用jquery解析JSON数据的方法20110227

    如果jQuery异步请求(例如`$.ajax`、`$.get`或`$.post`)设置了`dataType`参数为"json",或者使用`$.getJSON()`方法,jQuery会自动将响应数据解析为JavaScript对象,无需使用`eval()`。这是更安全且推荐的做法。...

    php+jquery+json完美结合例子

    本人折腾了两天才探索出来的, 程序简单,客服端通过jquery的getJSON函数请求PHP服务端,服务端返回一个二维数组,客户端把结果经简单处理打印出来。此例非常经典,初学者看了可以少走很多弯路(因为那些弯路我帮你...

    jquery与json和ajax的结合

    本文将详细介绍如何利用jQuery来实现与JSON和AJAX的有效结合,并通过一个具体的例子来展示其实际应用。 #### 二、基础知识简介 ##### 2.1 jQuery简介 jQuery是一款快速、简洁的JavaScript库,它极大地简化了HTML...

    Jquery跨域Json请求处理

    下面通过一个具体的例子来说明如何使用JQuery处理跨域JSON请求: 假设我们有一个API,其返回的数据如下: ```json { "success": [ {"id": 1, "title": "title1"}, {"id": 2, "title": "title2"}, {"id": 3, ...

    struts2+jquery+json 小例子

    在这个"struts2+jquery+json"的小例子中,我们可能会看到以下几个关键知识点: 1. **Struts2框架**: - **Action和Result**:Struts2的核心组件,Action负责业务逻辑处理,Result负责控制页面跳转。 - **...

    一个简单的struts2+json+jquery 交互的例子

    总结来说,这个例子展示了如何利用Struts2处理后端业务逻辑,使用JSON作为数据交换格式,以及通过jQuery在前端实现动态更新和与服务器的异步通信。了解和掌握这三个工具的整合使用,对于提升Web开发效率和用户体验...

    jquery ajax json struts2最简单例子测试成功

    在"jquery ajax json struts2最简单例子测试成功"的项目中,我们可以推断出以下几个关键点: 1. **整合jQuery与AJAX**:项目中可能使用jQuery的$.ajax()方法来发送异步请求。$.ajax()提供了一种方式,通过HTTP GET...

Global site tag (gtag.js) - Google Analytics