zoukankan      html  css  js  c++  java
  • 转摘 JQUERY操作JSON例子

    jquery:大家一定很熟悉,就算没用过,也应该听说过,不多做介绍,不知道的赶紧google一下。
    json:一种数据格式,她小巧,轻盈。在javascript的世界中,完胜XML。
    jquery和json都是因为小与巧而被广泛使用,今天把她们弄到一起,大家应该没意见吧。

    废话了一把,现在言归正传,
    通过这篇文章你可以得到以下收获:
    1.jqury如何用ajax的形式调用后台asp.net页面生成的json数据
    2.jquery简单的dom操作
    3.送本jquery的开发手册给大家(大家慢慢去研究)


    准备工作:
    首先,我们新建个网站(.net2.0就行).
    1.在我们的项目中jquery的js文件。
    2.新建一个htm文件,命名为dome.htm吧。
    代码如下:(head区的js代码就是实现的全部代码,有详细注释)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
    <title>jquery获取json数据演示页面</title>
        
    <script type="text/javascript" src="js/jquery-1.2.1.pack.js"></script>
        
    <script type="text/javascript">
        
    function getData(){
        $(
    "#list").html("");//清空列表中的数据
       //发送ajax请求
        $.getJSON(
        
    "jsondata.ashx",//产生JSON数据的服务端页面
        {name:"test",age:20},//向服务器发出的查询字符串(此参数可选)
       //对返回的JSON数据进行处理,本例以列表的形式呈现
        function(json){
       
    //循环取json中的数据,并呈现在列表中
        $.each(json,function(i){
        $(
    "#list").append("<li>name:"+json[i].name+"&nbsp; Age:"+json[i].age+"</li>")
        }
    )
        }
    )
        }

        
    </script>
    </head>
    <body>
        
    <input id="Button1" type="button" value="获取数据" onclick="getData()" />
       
    <ul id="list"></ul>
    </body>
    </html>

    3.我们再建一个一般应用程序(jsonData.ashx)
    代码如下:

    <%@ WebHandler Language="C#" Class="jsonData" %>

    using System;
    using System.Web;

    public class jsonData : IHttpHandler {
        
        
    public void ProcessRequest (HttpContext context) {
            context.Response.ContentType 
    = "text/plain";
            
    string data = "[{name:\"ants\",age:24},{name:\"lele\",age:23}]";//构建的json数据
           
    //下面两句是用来测试前台向此页面发出的查询字符
            string querystrname = context.Request.QueryString.GetValues("name")[0];//取查询字符串中namer的值
            string querystage = context.Request.QueryString.GetValues("age")[0];//取查询字符串中age的值
            
            context.Response.Write(data);
        }

     
        
    public bool IsReusable {
            
    get {
                
    return false;
            }

        }


    }


    对以上的内容我只说一点,那就是前台页面中的$.getJSON方法 

    $.getJSON(url, params, callback)
    用一个HTTP GET请求一个JavaScript JSON数据
    返回值:XMLHttpRequest
    参数:
    url (String): 装入页面的URL地址。
    params (Map): (可选)发送到服务端的键/值对参数。
    callback (Function): (可选) 当数据装入完成时执行的函数. 

    下面贴一些运行成功的图:
    1.运行结果

    2,后台调试的数据:


    好啦,这篇文章就写到这。
    附上jquery的开发手册:jqueryapi12.rar(这个手册本身就是基于jquery做的,,很漂亮)
    文字显得有点啰嗦,应该没走题,请大家给个及格分啦,

  • 相关阅读:
    设计模式之装饰模式
    强化学习运行环境,atari 2600 游戏模拟器,atari-py库 —— 无法运行游戏,pacman,surround,报错: Segmentation fault (core dumped)
    【转载】 DQN玩Atari游戏安装atari环境bug指南
    【转载】 windows python3 安装 openai gym 的 atari_py
    【转载】 ubuntu18.04 cmake版本 更新方法
    强化学习baseline论文—— rainbow算法中给出实验结果的54个atari2600游戏名称列表
    UBUNTU18.04 SERVER 多显卡 服务器,为防止显卡计算任务出现不意外报错,设置显卡工作状态为:设定持久模式
    【转载】 nvidia-smi
    记录一次实验室显卡服务器崩溃事件(Ubuntu18.04 server系统,4块NVIDIA的特斯拉显卡)
    【转载】 Tensorboard:PermissionError: [Errno 13] Permission denied: ‘/tmp/.tensorboard-info/pid-46614.info‘
  • 原文地址:https://www.cnblogs.com/jianjialin/p/1374187.html
Copyright © 2011-2022 走看看