基于jquery异步传输json数据格式实例代码


Posted in Javascript onNovember 23, 2013

1.jsp代码如下

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=basePath%>js/jquery-1.8.1.js"></script>
</head>
<script type="text/javascript">
 $(function(){
  $("#getResult").click(function(){
   $.ajax({
    type:"post",
    url:"<%=basePath%>jsonAction!getData.action",
    dataType:"json",
    data:{'param1':$("#param1").attr("value"),'param2':$("#param2").attr("value")},
    success:function(returnData){
     var html = "<table border='1'><tr><td>编号</td><td>姓名</td><td>描述</td></tr>";
     for(var i = 0; i < returnData.length; i++){
      html += "<tr><td>"+returnData[i].id+"</td><td>"+returnData[i].name+"</td><td>"+returnData[i].description+"</td></tr>";
     }
     $("#result").html(html);
    }
   });
  }); });
</script>
<body>
 <input type="text" value="haha" id="param1">
 <input type="text" value="hehe" id="param2">
 <div  id="result"></div>
 <input type="button" value="获取" id="getResult">
</body>
</html>

2.访问 action代码如下

public class JsonAction extends ActionSupport{
 public void getData() throws IOException
 {
  HttpServletRequest req = ServletActionContext.getRequest();
  String p1 = req.getParameter("param1");
  String p2 = req.getParameter("param2");  HttpServletResponse rep = ServletActionContext.getResponse();
  rep.setContentType("text/json;charset=utf-8");
  PrintWriter pw = rep.getWriter();
  String data = "[{\"id\":\"01\",\"name\":\"zhongqian\",\"description\":\""+p1+"\"},{\"id\":\"02\",\"name\":\"zhangsan\",\"description\":\""+p2+"\"}]";
  pw.print(data);
  pw.flush();
 }
}

3.效果如下:

基于jquery异步传输json数据格式实例代码

Javascript 相关文章推荐
Javascript 面向对象之重载
May 04 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
jquery插件格式实例分析
Jun 16 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 #Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 #Javascript
js获取电脑分辨率的思路及操作
Nov 22 #Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 #Javascript
Mac/Windows下如何安装Node.js
Nov 22 #Javascript
javascript Event对象详解及使用示例
Nov 22 #Javascript
js Date概念详细介绍
Nov 22 #Javascript
You might like
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
DIV菜单层实现代码
2010/11/19 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
EasyUI实现下拉框多选功能
2017/11/07 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
跟老齐学Python之Python安装
2014/09/12 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
详解python中@的用法
2019/03/27 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
英国假发网站:Hothair
2018/02/23 全球购物
宿舍使用违章电器检讨书
2014/01/12 职场文书
安全教育实施方案
2014/03/02 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android