asp+jquery+ajax+json实例

电玩女神 2022-06-11 00:58 255阅读 0赞

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
    
    <%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	  });
    这样是不是很方便