基于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写的日历类(基于pj)
Dec 28 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
简单实现JS计算器功能
Dec 21 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 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 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
python文件和文件夹复制函数
2020/02/07 Python
深入了解python列表(LIST)
2020/06/08 Python
物流毕业生个人的自我评价
2014/02/13 职场文书
幼师求职自荐信
2014/05/31 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
共青团员自我评价范文
2014/09/14 职场文书
见习报告的格式
2014/10/31 职场文书
交通事故起诉书
2015/05/19 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP