基于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中对数组的操作代码
Aug 12 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
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安装攻略:常见问题解答(一)
2006/10/09 PHP
php error_log 函数的使用
2009/04/13 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
Symfony的安装和配置方法
2016/03/17 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
Mac中安装nvm的教程分享
2017/12/11 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
Python获取央视节目单的实现代码
2015/07/25 Python
Python封装原理与实现方法详解
2018/08/28 Python
python实现简单日期工具类
2019/04/24 Python
django 消息框架 message使用详解
2019/07/22 Python
用python写测试数据文件过程解析
2019/09/25 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
python关于倒排列的知识点总结
2020/10/13 Python
劲霸男装广告词改编版
2014/03/21 职场文书
岗位聘任书范文
2014/03/29 职场文书
答谢会策划方案
2014/05/12 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
党员进社区活动总结
2015/05/07 职场文书
2015年司法局工作总结
2015/05/22 职场文书
未婚证明格式
2015/06/15 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python