基于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图片预加载技术(详细演示)
Mar 12 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
JS敏感词过滤代码
Dec 23 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
微信小程序一周时间表功能实现
Oct 17 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
js闭包学习心得总结
2018/04/17 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
Python中用altzone()方法处理时区的教程
2015/05/22 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
Python中Selenium库使用教程详解
2020/07/23 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
新闻专业推荐信范文
2013/11/20 职场文书
爱国演讲稿400字
2014/05/07 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
群众路线专项整治方案
2014/10/27 职场文书
关于颐和园的导游词
2015/01/30 职场文书
家长会开场白和结束语
2015/05/29 职场文书
中学音乐课教学反思
2016/02/18 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
Python3 类型标注支持操作
2021/06/02 Python
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技