`
yelifei94
  • 浏览: 30635 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

jquery_ajax_json简易例子

阅读更多
package com.iss.servlet;

import org.json.JSONException;
import org.json.JSONObject;

import com.iss.pojo.User;
import com.iss.util.JSONUtil;

public class UserServlet extends HttpServlet {

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

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		
	    //list 添加对象
		List<User> userList = new ArrayList<User>();
		User user1 = new User("张三", "男", "18");
		User user2 = new User("李四", "男", "19");
		User user3 = new User("王五", "男", "20");
		userList.add(user1);
		userList.add(user2);
		userList.add(user3);
		PrintWriter out = response.getWriter();
		String str = null;
		try {
			//帐号密码如果匹配则把list 返回给界面
			if (request.getParameter("userName").equals("jquery") 
					&& request.getParameter("password").equals("ajax")) {
				str = JSONObject.quote(JSONUtil.toJSONString(userList));
			}
           
			out.print(str);
		} catch (JSONException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		System.out.println("str  "+str);
		out.flush();
		out.close();
	}


}

 

	<body>
		帐号 jquery 密码 ajax
		<form id="mainform">
			<ul>
				<li>
					帐号
					<input type="text" name="userName" />
				</li>
				<li>
					密码
					<input type="password" name="password" />
				</li>
				<li>
					<input onclick="login()" type="button" value="登录" />
				</li>
			</ul>
		</form>
		查询到的数据
		<div id="diva">

		</div>

		<script type="text/javascript">
           function login(){
           
           //获取form的参数 
            var args =$("#mainform").serialize();
            
            //调用 jquery 的json获取方法
             //三个参数分别为 :请求路径  ,请求参数,返回数据的回调函数
            $.getJSON("servlet/UserServlet",args,function (data){
            if(data!=null){
             
              
             // 界面返回的是一个json格式字符串 调用JSON.parse()把数据转化为json
             // 格式的对象 
               
             var jsondata =JSON.parse(data);
             parseData(jsondata);
            }else{
             alert("帐号密码输入有误");
            }
            })
           }
           function parseData(data){
            var str="";
            //遍历json格式数据
            for (var key in data){
            str =str+" 用户"+data[key].userName+"   年龄"+data[key].age+"<br/>"
            alert(str);
            }
            //把数据添加到div中
           $("#diva").html(str);
           }
         </script>
	</body>

 

 

UserServlet 记得要导入 工具类 JSONStringObject  JSONUtil

jsp 要导入  jquery.js和 json.js 

 

其实这都只是利用json工具类把 字符串 拼装 为 json 格式而已 不懂的可以去看下json格式。

 

附上工程

4
0
分享到:
评论
1 楼 生死格斗 2011-11-29  
谢谢

相关推荐

    jQuery_Ajax_Json全解析

    **jQuery、Ajax与JSON全解析** 在Web开发中,jQuery、Ajax和JSON是不可或缺的工具,它们共同构建了现代网页的动态交互体验。本解析将深入探讨这三个概念及其相互关系。 **jQuery:简化JavaScript操作** jQuery是...

    J2EE中JSONJquery_AJAX应用中文PDF版

    资源名称:J2EE中JSON Jquery_AJAX应用 中文PDF版内容简介:本文档主要讲述的是J2EE中JSON Jquery_AJAX应用;主要是描述使用JSON JQuery_AJAX实现页面动态加载与页面表单数据的异步保存。首先页面通过调用JQuery_...

    Ajax-json.rar_JSON_ajax json_java Jquery ajax_javascript_json aj

    在提供的"Ajax-json.rar"压缩包中,可能包含了一些使用jQuery的AJAX和JSON的示例代码,这可以帮助学习者理解如何在实际项目中应用这些技术。通过分析和运行这些示例,你可以深入理解AJAX和JSON在Web开发中的实际运作...

    jquery_json.rar_JSON_jquery_jquery-json_jquery.json_jquery.json.

    总结来说,`jquery_json.rar`中的插件为jQuery提供了JSON处理能力,使得在JavaScript环境中处理JSON数据变得更加便捷,特别是在那些不支持原生JSON API的旧版浏览器中。这个插件的使用,极大地促进了Web应用的开发...

    flgl.rar_ajax json jquery_jquery json

    标题“flgl.rar_ajax json jquery_jquery json”和描述中提到的主题主要集中在使用Ajax、JSON以及jQuery技术在前端实现与后端数据交互的过程。这里,我们详细探讨这些关键概念及其在实际开发中的应用。 首先,**...

    JQuery_Ajax_AutoComplete_使用JSON数据

    在探讨如何利用jQuery的AutoComplete插件结合Ajax与JSON数据实现自动补全功能之前,我们首先需要理解几个关键概念:jQuery、Ajax、JSON以及AutoComplete。 ### jQuery简介 jQuery是一款快速、简洁的JavaScript库,...

    json.rar_JSON_JSON java_ajax json_jquery json jar_json-lib-2.2.2

    4. **jquery_json.jar**:此jar包可能包含与jQuery库集成的Java代码,以便在服务器端处理来自jQuery的JSON数据。这使得服务器端的Java代码能够理解和解析由jQuery发出的JSON请求,也可以将响应数据以JSON格式返回给...

    Jquery_Ajax_Struts2_Action_JSP_Json

    总结起来,"Jquery_Ajax_Struts2_Action_JSP_Json"的示例展示了如何利用jQuery的Ajax功能与Struts2框架相结合,通过JSON数据格式在客户端和服务器端之间进行高效的数据交换,从而实现无刷新的页面更新,提升Web应用...

    jquery_ajax_json简单实例

    本实例将深入探讨如何利用jQuery的AJAX功能与JSON数据格式进行交互,以实现异步数据加载和更新,从而提高网页的用户体验。 首先,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它易于人阅读和...

    ajax_struts_jquery_json级联菜单

    在"ajax_struts_jquery_json级联菜单"的场景中,我们将看到如何利用这四种技术协同工作来创建这样的功能。 首先,Struts框架在后台处理业务逻辑。当用户在前端选择了一个父级菜单项后,Struts Action会接收到这个...

    J2EE中JSON+Jquery_AJAX应用[定义].pdf

    在J2EE开发中,JSON(JavaScript Object Notation)和JQuery_AJAX的结合使用是实现页面动态加载和异步数据交互的关键技术。JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。JQuery_...

    jQuery_Ajax_全解析.pdf

    jQuery_Ajax_全解析,对jQuery_Ajax的全面解析,让你更快速的掌握着两门技术

    jQuery_ajax 课件

    jQuery_ajax 课件

    jQuery_AJAX网页系统

    综上所述,jQuery_AJAX网页系统是通过jQuery库简化和优化AJAX技术,为创建响应式、高效且用户体验良好的网页提供了一种强大的工具。了解并熟练掌握这些知识,对提升网站性能和用户满意度至关重要。

    J2EE中JSON+Jquery_AJAX应用

    JSON+Jquery_AJAX,你值得下载,最好的说明,最好的描述

    jquery_ajax_php_三级联动.rar

    本项目“jquery_ajax_php_三级联动.rar”显然关注的是如何利用这些技术实现一个三级联动的效果,这是一种常见的交互设计,常用于下拉菜单、地区选择等场景,让用户能够按层次逐级选择。下面我们将详细探讨这些知识点...

    jQuery_AJAX 无刷新评论

    "jQuery_AJAX 无刷新评论"的功能,就是利用这两种技术实现在不重新加载整个网页的情况下,动态更新评论区内容。下面将详细阐述这一功能背后的技术原理和实现方法。 **jQuery库** jQuery是一个广泛使用的JavaScript...

Global site tag (gtag.js) - Google Analytics