基于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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 Javascript
React forwardRef的使用方法及注意点
Jun 13 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
php学习笔记之 函数声明
2011/06/09 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
python中执行shell命令的几个方法小结
2014/09/18 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
Python实现自动整理文件的脚本
2020/12/17 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
行政人事经理职位说明书
2014/03/05 职场文书
大学生个人求职信例文
2014/07/07 职场文书
大学生党课感想
2015/08/11 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
导游词之河北邯郸
2019/09/12 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
MongoDB使用场景总结
2022/02/24 MongoDB
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL