基于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插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 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中数字、字符与对象判断函数用法实例
2014/11/26 PHP
php中使用url传递数组的方法
2015/02/11 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
php命令行模式代码实例详解
2021/02/26 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
浅析python连接数据库的重要事项
2021/02/22 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
测绘工程个人的自我评价
2013/11/23 职场文书
培训科主任岗位职责
2014/08/08 职场文书
离婚财产处理协议书
2014/09/30 职场文书
工作失职检讨书
2015/01/26 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
会议室管理制度范本
2015/08/06 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP