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

JQuery+JSON+java学习实例

阅读更多

第一步:导入jquery中所需的js和css文件(css文件可根据自己需要进行更改)


<link type="text/css" href="css/jquery-ui-1.7.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></script>


第二步:将以下代码加入body中
 <h2 class="demoHeaders">Dialog</h2>
  <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all">
  <span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
             <div id="dialog" title="Dialog Title">
   <p>
   <form action="test_login.action" method="post" id="struts">
   <input type="text" id="mingzi" name="username" value="wenhao">
   <input type="text" id="nianling" name="password" value="wenhao">
   </form>
   </p>
  </div>
第二步:将以下代码加入head中
<script type="text/javascript">
$(function(){
// Dialog  
    $('#dialog').dialog({
     autoOpen: false,
     width: 600,
     modal: true,
     buttons: {
      "Ok": function() {
       getData(document.getElementById('mingzi').value,document.getElementById('nianling').value);
       //struts.submit();
       $(this).dialog("close");
      },
      "Cancel": function() {
       $(this).dialog("close");
      }
     }
    });
   
    // Dialog Link
    $('#dialog_link').click(function(){
     $('#dialog').dialog('open');
     return false;
    });
//hover states on the static widgets
    $('#dialog_link, ul#icons li').hover(
     function() { $(this).addClass('ui-state-hover'); },
     function() { $(this).removeClass('ui-state-hover'); }
    );
   
   
   });
function getData(str,str2){
        $("#list").html("");//清空列表中的数据
     //发送ajax请求
      $.getJSON(
      "json_data.jsp",//产生JSON数据的服务端页面
      {name:str,age:str2},//向服务器发出的查询字符串(此参数可选)
      //对返回的JSON数据进行处理,本例以列表的形式呈现
      function(json){
     //循环取json中的数据,并呈现在列表中
      $(json).each(function(i){
        $("#list").append("<li>name:"+json[i].name+"&nbsp; Age:"+json[i].age+"</li>")
      })
   })
}

</script>
<style type="text/css">
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
</style>

将json_simple.jar包引入到WEB-INF/lib中,json_data.jsp中的代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<
%@page import="org.json.simple.JSONArray"%>
<
%@page import="org.json.simple.JSONObject"%>
<%
  String name=request.getParameter("name");
  String age=request.getParameter("age");
  JSONArray array = new JSONArray(); //声明JSON数组
  JSONObject objs = new JSONObject();
  objs.put("name",name);
  objs.put("age",age);
  array.add(objs);
  for(int i=0;i<10;i++){
    JSONObject obj = new JSONObject();
    obj.put("name","ants"+i);
    obj.put("age",24+i);
    array.add(obj);
  }
  out.print(array.toString());
%>

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/lovexuwenhao/archive/2009/08/28/4494217.aspx

分享到:
评论

相关推荐

    SSH+jQuery+json 实现的Ajax操作,绝对精华,代码简练清晰,绝对能看明白

    这个压缩包中的资源,"SSH+jQuery+json 实现的Ajax操作,绝对精华,代码简练清晰,绝对能看明白",显然提供了一个使用这些技术实现Ajax级联操作的实例。下面将详细介绍这些技术及其在Ajax操作中的应用。 **SSH ...

    ajax+json实例

    **Ajax+JSON 实例详解** 在现代Web开发中,AJAX(Asynchronous JavaScript and XML)技术已经成为提升用户体验的重要工具,它允许网页在不刷新整个页面的情况下与服务器进行数据交互。结合JSON(JavaScript Object ...

    Struts2+JQuery+Json实例

    在"Struts2+JQuery+Json实例"中,我们探讨的是如何结合这三个技术来创建动态、响应式的Web应用。以下是这个实例中的关键知识点: 1. **获取JS值**:在JQuery中,我们可以使用`val()`函数来获取表单元素的值,如...

    struts2+jQuery+json 实例 测试过了 运行成功 从别人那偷来的

    在项目中,`Struts2JQueryJson`文件夹可能包含了HTML页面、JavaScript脚本、Struts2相关的Action类、以及可能的 strut2 配置文件等资源。 总结来说,这个实例通过结合Struts2的后端控制、jQuery的前端交互和JSON的...

    struts2+jQuery+json 实例

    结合实例,"struts2+jQuery+json 实例"很可能是创建了一个Web应用,用户在前端通过jQuery发送AJAX请求,这些请求可能包含表单数据或者对页面的某些操作。后端Struts2框架接收到请求后,会调用相应的Action执行业务...

    ajax+json+java

    【标题】"Ajax + JSON + Java" 是一种常见的前端与后端交互技术组合,用于实现网页的异步数据更新,无需整个页面刷新。Ajax(Asynchronous JavaScript and XML)是利用JavaScript进行局部页面更新的技术,而JSON...

    整合jquery+json+struts2异步提交实例

    在这个实例中,“整合jquery+json+struts2异步提交”是一个典型的前端与后端交互的示例,利用了jQuery的Ajax功能和Struts2框架处理JSON数据。下面我们将详细探讨这些技术及其相互配合的工作原理。 **jQuery** 是一...

    jquery+ajax+json+servlet实例源码

    这个实例源码的学习价值在于,它将前端的jQuery与后端的Servlet结合,通过AJAX和JSON实现了数据的双向交互,这在实际的Web开发中非常常见。通过深入研究这个实例,开发者可以提升对这些技术的理解和应用能力。同时,...

    Struts+Jquery+Ajax+Json应用实例

    Struts、jQuery、Ajax以及JSON是Web开发中的四个关键技术,它们在构建动态、交互式的Web应用程序中发挥着重要作用。下面将分别介绍这些技术的核心概念及其在实际应用中的结合使用。 **Struts框架**:Struts是Apache...

    S2SH+jQuery+JSON+Ajax注册--异步校验

    标题 "S2SH+jQuery+JSON+Ajax注册--异步校验" 提及的技术栈主要包含四个关键部分:Struts2 (S2),Spring,Hibernate(SSH)这三大企业级开发框架,以及jQuery、JSON和Ajax这三者组成的前端交互技术。这篇博客文章...

    java+ajax+json+jquery完整实例

    总结来说,这个“java+ajax+json+jquery完整实例”是一个很好的学习资源,可以帮助开发者理解如何在实际项目中运用这些技术,实现前后端的高效交互,提升用户体验。通过学习和实践这个实例,开发者能够增强自己的Web...

    struts2+spring+hibernate+jquery+dwr+json

    标题 "struts2+spring+hibernate+jquery+dwr+json" 描述了一个集成的Web应用程序开发框架,其中包含了多个关键技术和库。这个框架旨在提高开发效率,提供灵活的数据管理,以及用户友好的前端交互。 1. Struts2:...

    Jquery+servlet+JSON处理

    4. **示例代码**:可能包含了前端jQuery代码和后端Servlet代码的实例,展示如何实现完整的数据交互流程。 5. **错误处理**:在数据传输过程中可能出现的问题,如网络异常、JSON解析错误等,及其处理方法。 由于没有...

    java+json+jquery经典实例

    总的来说,这个实例提供了学习和实践Java后端、JSON数据交换和jQuery前端交互的良好机会,对于初学者来说,这是一个很好的起点,可以加深对这些核心技术的理解,并掌握实际项目中的应用。通过亲手运行和修改这些例子...

    Struts2+hibernate3+JQuery+ajax+json三级联动

    Struts2、Hibernate3、JQuery、Ajax以及Json是Web开发中的重要技术栈,它们各自在Web应用程序中扮演着不同的角色。在这个“三级联动”项目中,这些技术被巧妙地结合在一起,实现了数据的动态交互和展示。 Struts2是...

    JAVA JSON 实例

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它采用完全独立于语言的文本格式,但也使用了类似于C风格的语言(包括C、C++、C#、Java、JavaScript、Perl、Python等)的习惯,这使得JSON成为理想...

    使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

    本文通过实例详细介绍了如何使用Jquery、Ajax和Json实现数据的异步分页功能。后端通过Java生成Json格式数据,前端则通过Jquery处理Ajax请求和分页逻辑,展示数据。整个过程涉及前后端的协作,页面渲染和用户交互的...

    PHP+Jqurey+json+easyui实例

    通过这个实例,你可以学习如何使用jQuery发起AJAX请求,PHP处理数据并以JSON格式返回,以及如何在前端使用easyUI展示这些数据。这不仅有助于理解前后端交互的基本原理,也有助于提升网页动态加载和数据操作的能力。

    ssi+json+jquery 案例

    1. 示例代码:展示如何在Struts2和Spring3框架下集成SSI、JSON和jQuery的实例。 2. jar包:可能包括Struts2、Spring3和iBatis2的依赖库,以及其他可能用到的辅助库。 3. HTML文件:展示如何在页面中使用SSI技术。 4....

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

    总的来说,这个压缩包提供了一个全面的学习资源,帮助开发者深入理解并熟练运用JSON数据格式、Struts2框架和jQuery库。通过这些实例,你可以提高Web开发技能,尤其是处理动态交互和数据交换的能力。在实践中不断探索...

Global site tag (gtag.js) - Google Analytics