asp+jquery+ajax+json实例

最新推荐文章于 2025-11-23 04:48:34 发布

转载最新推荐文章于 2025-11-23 04:48:34 发布 · 1.6w 阅读

文章标签：

#json #jquery #ajax #asp #function #sql

JAVAScript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何利用jQuery获取并处理JSON格式的数据，通过实例演示如何将服务器生成的JSON字符串转换为HTML页面上的动态显示内容，包括省份和城市信息的展示。

asp：
<td colspan="2" height="50">层    次:
<select  name="studykindid" id="studykindid" style="width=200px; " >
<option value="">全部</option>
<%
sql="select studykindid,studykind from studykindlist"
rs.open sql,DB,1,1
do until rs.eof
%>
<option value="<%=rs("studykindid")%>"><%=rs("studykind")%></option>
<%
rs.movenext
loop
rs.close
%>
</select>
</td>
</tr>
<tr align=center>
<td colspan="2" height="50" width=50% id="subject">专    业:
<select  name="subject" style="width:200px; " >
<option value="">全部</option>
<%
sql="select distinct subject from subjectsys"
rs.open sql,DB,1,1
do until rs.eof
%>
<option value="<%=rs("subject")%>"><%=rs("subject")%></option>
<%
rs.movenext
loop
rs.close
%>
</select>
</td>

js：
$(document).ready(function(){
$("#studykindid").change(function(){
var sid = $(this).val();
var changeUrl = "getsub.asp?q="+sid;
$.getJSON(changeUrl,function(json){

//var dataObj=eval("("+json+")");
//alert(json.sj.length);
alert(json.sj[0].value);
var str='专    业:<select  name="subject" style="width:200px;" >';
for(i=0;i<json.sj.length;i++){
str+='<option value='+json.sj[i].value+'>'+json.sj[i].subject+'</option>';
}
str+='</select>';
$("#subject").html(str);

})

});
});

getsub.asp
<!--#include file="public/db.asp"-->
<%Response.Charset="GB2312"
studykindid=request.QueryString("q")
'response.Write studykindid
response.expires=-1
if studykindid="" then
ss=" "           
else
ss=" where studykindid='"&studykindid&"'"
end if
sql="select subject from subjectsys"&ss
set rs=server.createobject("adodb.recordset")
rs.open sql,DB,1,1
response.Write "{""sj"":["
response.Write "{""subject"":""全部"",""value"":""ppp""}"
do until rs.eof
response.Write ",{""subject"":"""&rs("subject")&""",""value"":"""&rs("subject")&"""}"

rs.movenext

loop
response.Write "]}"
'response.Write "{sj:[{name:'1',value:'0'},{name:'6101',value:'西安市'},{name:'6102',value:'铜川市'},{name:'6110',value:'商洛市'}]}"
rs.close
set rs=nothing
set DB=nothing
%>

Jquery处理Json字符串

以前一直没有弄过json这个东西，今天弄了一个jquery处理json实例，感觉挺简单，方便的发到这里来与大家一起分享。
功能：jquery处理json实现
作者：wangsdong
来源：www.aspbc.com
原创文章，转载请保留以上信息
假设服务器生成json字符串的文件是json.asp，生成的json字符串的内容是：{"weatherinfo":{"province":"江苏省份","city":"南京"}}，
1	json.asp的代码如下：
2	<%
3	str="{""weatherinfo"":{""province"":""江苏省"",""city"":""南京""}}"
4	response.write str
5	%>

现在要把里面的省份和城市放到html页面的指定位置。所以这里就需要用到jquery的get、post或者是ajax提交到json.asp，来得到json字符串，具体代码如下：
第一种方法：
01	<script type="text/javascript" src="jquery.js"></script>
02	<script type="text/javascript">
03	$(document).ready(function(){
04	 $.get("json.asp?t="+Math.random(), function(data){
05	     eval("jsonobj="+data);
06	  $("#p1").html(jsonobj.weatherinfo.province);
07	  $("#c1").html(jsonobj.weatherinfo.city);
08	  });
09	});
10	</script>
11	<div>省份：<span id="p1"></span><br />城市：<span id="c1"></span></div>

运行一下这个html页面，省份和城市后面是不是得到了json字符串中的省份和城市了，是不是很简单的。
或者还有一种写法：
第二种方法：
01	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
02	<script type="text/javascript" src="jquery.js"></script>
03	<script type="text/javascript">
04	$(document).ready(function(){
05	   $.getJSON("json.asp?t="+Math.random(),
06	    function(json,status)
07	    {
08	       $("#p1").html(json.weatherinfo.province);   
09	       $("#c1").html(json.weatherinfo.city);
10	    });
11	});
12	</script>
13	<div>省份：<span id="p1"></span><br />城市：<span id="c1"></span></div>
这种比前面的那种写法，直接将json.asp中生成的json字符串，转成json去了，可以直接使用。
第二种方法对现在这个例子来说，优势比第一种好不了多少，但对大数据量的时候来说，就能看出来它的优势了。以下是它对数组操作的方法：
01	$.getJSON(
02	    "json.asp",
03	     {classNum:classNum},
04	     function(json,status)
05	    {
06	     $.each(json,function(i){
07	      $('#stuDiv').append("<div>学生学号:"+json[i].num+"</div>");
08	     }
09	   );
10	  });
这样是不是很方便