基于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 相关文章推荐
jquery教程ajax请求json数据示例
Jan 13 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
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实现图片缩放功能类
2013/12/18 PHP
php中session使用示例
2014/03/29 PHP
php绘制一条弧线的方法
2015/01/24 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
JS实现轮播图效果
2020/01/11 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
详解python之heapq模块及排序操作
2019/04/04 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
使用python去除图片白色像素的实例
2019/12/12 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
简短大学毕业感言
2014/01/18 职场文书
触摸春天教学反思
2014/02/03 职场文书
教师个人鉴定材料
2014/02/08 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
理想演讲稿范文
2014/05/21 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
入党介绍人意见2015
2015/06/01 职场文书
初中物理教学反思
2016/02/19 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python