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

JavaScript015

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)方法使用比较灵活,可以用在比较复杂的情况。