复制代码 代码如下:

1.jsp代码如下

文章为你免费提供二款jquery读取网页特效on文件二款实例代码,这些代码非常实用哦,是二款完整的jquery读取json格式文件代码哦。

1.jsp代码如下

1.获取DataSet
2.转成DataTable

复制代码 代码如下:

json文件:

复制代码 代码如下:

  1. public static string DataTableToJson(DataTable dt)
    {
    StringBuilder jsonBuilder = new StringBuilder();
    //jsonBuilder.Append(“{“); //输出的要求不要’}’
    //jsonBuilder.Append(dt.TableName);
    jsonBuilder.Append(“[“);
    for (int i = 0; i < dt.Rows.Count; i++)
    {
    jsonBuilder.Append(“{“);
    for (int j = 0; j < dt.Columns.Count; j++)
    {
    jsonBuilder.Append(“\””);
    jsonBuilder.Append(dt.Columns[j].ColumnName);
    jsonBuilder.Append(“\”:\””);
    jsonBuilder.Append(dt.Rows[i][j].ToString());
    jsonBuilder.Append(“\”,”);
    }
    jsonBuilder.Remove(jsonBuilder.Length – 1, 1);
    jsonBuilder.Append(“},”);
    }
    jsonBuilder.Remove(jsonBuilder.Length – 1, 1);
    jsonBuilder.Append(“]”);
    //jsonBuilder.Append(“}”); //输出的要求不要’}’
    return jsonBuilder.ToString();
    }
    4.把Json字串Response出来
    5.获取Json字串

<%@ 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”
“;
<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);
    }
   });
  });

[
{
“name”:”xujun”,
“sex”:”男”,
“home”:”nanjing”
},
{
“name”:”jack”,
“sex”:”男”,
“home”:”beijing”
}
]

html文件:
<!doctype html public “-//w3c//dtd html 4.01 transitional//en”
“;
<html>
<head>
<meta http-equiv=”content-type” content=”text/html;
charset=utf-8″>
<title>insert title here</title>
<script src=”../jquery.js”></script>
<script>
$(document).ready(function(){
$.getjson(‘jsondata.json?id’,function(data){
//遍历json中的每个entry

$.each(data,function(entryindex,entry){
var html='<tr>’;
html+='<td>’+entry[‘name’]+'</td>’;
html+='<td>’+entry[‘sex’]+'</td>’;
html+='<td>’+entry[‘home’]+'</td>’;
html+='</tr>’;
$(‘#title’).after(html);

});
});
});
</script>
</head>
<body>
<table>
<tr id=”title”>
<th>姓名</th>
<th>性别</th>
<th>家庭地址</th>
</tr>
</table>
</body>
</html>

<%@ 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”
“;
<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);
    }
   });
  });

function load() //页面加载
{
$.ajax({
type:”post”,
url:”../Handler/LinkManHandler.ashx”,//从哪获取Json
data:”action=getLinkMan&id=”+comId,//Ajax传递的参数

 });
</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>

实例二

 });
</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>

beforeSend:function(){
//获取之前显示 loading 或 正在加载
},

2.访问 action代码如下

<!doctype html public “-//w3c//dtd html 4.01//en” ”
“>
<html>
 <head>
  <meta http-equiv=”content-type” content=”text/html;
charset=iso-8859-1″>
  <title>json document</title>
  <script type=”text/网页特效”
src=”lib/jquery/jquery-1.3.2.js”></script>
  <script type=”text/javascript”>
   $(function(){
    $(“#button”).click(function(){
     $.getjson( b.json ,function(data){  //
getjson方法获得json文件的代码,其中的回调函数的参数data就是json代码
      $(“#json”).empty();  //清空带“json” id的div标签的内容
      $.each(data,function(entryindex,entry){
//each方法遍历json文件中的对象,entryindex是当前索引, entry是当前项
       var html=”<div class= entry >”;
       html += “<h3 class= term >”+entry[ term ]+ </h3>
;
       html += “<div class= part >”+entry[ part
]+”</div>”;
       html += “<div class= definition >”+entry[ definition
];
       if(entry[ quote ]){
        html+=”<div class= quote >”;
        $.each(entry[ quote ],function(quoteindex,line){
         html+=”<p>”+line+”</p>”;
        });
        html+=”</div>”;
       }
       html+=”</div>”;
       html +=”</div>”;
       $(“#json”).append(html);
      });
     });
    });
   });
  </script>
 </head>
 <body>
  <div id=”button”><b>get json
document</b></div>
  <div id=”json”></div>
 </body>
</html>

2.访问 action代码如下

success:function(mess)
{
$(“#divImage”).hide();
if(mess!=”]”)// 如果获取的数据不为空
{
var type=eval(mess);
var str=”<a>首页</a>”
for(var i=0;i<type.length;i++)
{
//操作type 获取东西
str+=”<a>”+type[i].数据库字段名+”</a>
}
$(“#divLinkMan”).html(str);//把str嵌入div divLinkMan 中
}
else
{
var notfind=”<h2>未找到数据<a href=’../Main.htm’
target=’_parent’>返回</a></h2>”
$(“#divLinkMan”).html(notfind);
}

复制代码 代码如下:

1 2

复制代码 代码如下:

},

public class JsonAction extends ActionSupport{
 public void getData() throws IOException
 {
  HttpServletRequest req = ServletActionContext.getRequest();
  String p1 = req.getParameter(“param1”);
  String p2 = req.getParameter(“param2”);

json文件…

public class JsonAction extends ActionSupport{
 public void getData() throws IOException
 {
  HttpServletRequest req = ServletActionContext.getRequest();
  String p1 = req.getParameter(“param1”);
  String p2 = req.getParameter(“param2”);

complete:function()
{
//所有的都执行完后的方法
}
});
}

  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();
 }
}

  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();
 }
}

代码如下: 1.获取DataSet 2.转成DataTable

3.效果如下:

3.效果如下:

  1. public static string DataTableToJson(DataTable dt) { StringBuilder
    jsonBuilder = new StringBuilder(); //jsonBuilder….

图片 1

图片 2

您可能感兴趣的文章:

  • JQuery
    解析多维的Json数据格式
  • jqeury
    eval将字符串转换json的方法
  • JSON 数据格式介绍
  • Json对象与Json字符串互转(4种转换方式)
  • js
    将json字符串转换为json对象的方法解析
  • android调用国家气象局天气预报接口json数据格式解释
  • 解析JSON对象与字符串之间的相互转换
  • android
    解析json数据格式的方法
  • Android
    App数据格式Json解析方法和常见问题
  • jQuery.parseJSON(json)将JSON字符串转换成js对象
  • PHP中使用json数据格式定义字面量对象的方法
  • 实例详解JSON数据格式及json格式数据域字符串相互转换

复制代码 代码如下: %@ page
language=”java” contentType=”text/html; charset=UTF-8″
pageEncoding=”UTF-8″% % String path = request.getContextPath(); String
b…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图