js获取json数据，自动添加至表格，如何防止重复

JavaScript028

js获取json数据，自动添加至表格，如何防止重复,第1张

一、使用js获取接口数据的方法①$get(url,[data],[callback])url:请求的地址data:请求数据的列表callback:请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个为服务器的状态,是可选参数。其中服务器返回数据的格式其实是字符串形式,并不是我们想要的JSON数据格式。上例子：var url3 = 'http://mshop.gemstc.com/ApiService/msgget.php'$.get(url3,function(data){alert(data) })此时如果对data采用json解析数据，得到的值为undefined。所以我们使用这种get方法获取到的值要是JSON格式，需要定义获取的数据类型为json格式，上例子：var url3 = 'http://mshop.gemstc.com/ApiService/msgget.php'$.get(url3,function(data){ $('#result').append('interval:'+data.name+'')//此时返回的是JSON格式的内容，例：我们可以使用data.name获取到name字段的值并输出。 }, 'json')②$post(url,[data],[callback],[type])post方法中多了一个type：获取数据的类型格式，post其实和get是一样的用法，type不定义，返回的是字符串类型的，定义为json格式，返回的就是json格式的数据，此处可以仿照上面的get方法，把get改成post就搞定了，就不多说了。

js使用jsonencode转码在向前端传递数据的时候，我们经常要把数据按照一定格式传递，如json格式，php中用json_encode来转换,但是这里通常会出现一个问题,那就是如果要转换的数据中包含中文，那么json_encode会自动将其中文字符转换成unicode编码。在调用json_encode 的时候我们可以先用urlencode()把它转换成unicode编码,经过json_encode后，再用urldecode解码，这样就能原样把数据传输到前台。在进行JS开发过程中，尤其是在开发报表时，报表已集成到Web页面中，通过在页面传递参数至报表中时，会发现有时某些参数值，传递到报表中是显示为问号或乱码等等一系列不能正常显示的情况。这是由于浏览器和报表服务器的编码不同，字符多次进行编码转换时出现错误导致字符的显示出现乱码，尤其是中日韩文和特殊字符更容易出现乱码问题。

以开发报表软件FineReport为例，在给报表服务器发送请求之前，对URL或者只对URL里面的参数名字和参数值，进行cjkEncode的编码，该方式兼容了各种不同的字符集，如ISO8859-1、 UTF-8、 GBK、 ENU_JP，尤其对中日韩文的处理采取了统一的方案。

有两种方法，一种是$.ajax(option)方法，一种是$.getJSON()方法。

实例：

一、数据集所在jsp页面out.jsp,代码如下

<%@page contentType="text/plaincharset=UTF-8"

language="java"

import="java.io.*,java.net.*,java.util.*"

buffer="8kb"

session="false"

autoFlush="true"

%>

<%

String jsonData="{data:[{id:200901,name:'name1'},{id:200902,name:'name2'},{id:200903,name:'姓名3'},{id:200904,name:'姓名4'},{id:200905,name:'姓名5'}]}"

//out.clear()

out.write(jsonData)

%>

二、js处理页面

(1)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">

<head>

<title>test</title>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8"/>

<script type="text/javascript" language="javascript" src="js/jquery.js"></script>

<script type="text/javascript">

function getOut(){

var s=''

$.ajax({

type:'get',//请求方式

url:'out.jsp?id='+Math.random(), // AJAX HTTP请求接口

data:'',//提交到服务器接口的参数 比如'{cid:0405}'，结果为out.jsp?cid=0405格式

dataType:'json',//请求类型为json, 更多见jquery doc文档

timeout:7000,//请求超时后停止请求

success: function(json){

var d=json.data

$.each(d,function(i){

s+=('<p>id:'+d[i].id +' | name:'+d[i].name+'</p><hr/>')

})

$('#out').html(s)}})

}

</script>

</head>

<body style="margin:20pxtext-align:centerbackground:#E5E5E5">

<input type="text" name="getdata" onclick="getOut()"/>

<div id="out">

</div>

</body>

</html>

(2)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">

<%@ page language="java" contentType="text/htmlcharset=utf-8"%>

<head>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script>

function showStudent(){

var s=''

$.getJSON("out.jsp?id="+Math.random(),function(json){

var d=json.data

for(var i=0i<d.lengthi++){

s+=('<p>id:'+d[i].id +' | name:'+d[i].name+'</p><hr/>')

}

$('#content').html(s)

})

}

</script>

</head>

<body>

<input type="button" value="获取学院信息" onclick="showStudent()" />

<div id="content"></div>

</body>

</html>

总结：

（1）有时候总是出现错误，原因在于——json数据格式有问题，前端$.getJSON()方法并没有什么错误。

（2）相对来说，$ajax(option)方法使用比较灵活，可以用在比较复杂的情况。