浅析ajax请求json数据并用js解析(示例分析)_jquery

自从接触了jquery就喜欢上了前端开发,而且深深感受到了前端开发的强大与重要之处。同时也想为asp.net鸣不平,事实上asp.net并没有臃肿,说它臃肿的人无非是那些不了解它的人,可能他们看见过一些asp.net低级程序员在不断往页面里拖控件,然后发现生成的页面中含有大量的垃圾代码,而且几乎把所有的逻辑处理都写在了服务器端,觉得服务器压力太大了。事实上,刚入门asp.net的人会有拖控件的习惯,但是当你再深入你会发现,最终asp.net的开发模式还是跟PHP、jsp等其它web开发模式是一样的,PHP是html+css+js+PHP语言,asp.net是html+css+js+C#语言,唯一不同的只是服务器端语言而已(面向开发人员来说),如果看到这里还说asp.net很臃肿,因为需要.net框架的支持,那么为什么不说jsp很臃肿?jsp也需要java虚拟机的支持啊!所有的web开发都是基于客户端发请求-服务器端返回数据-客户端再处理数据这个模式,而且asp.net开发模式的好处在于很好地分离了服务器端与客户端的代码,不用在html里嵌套服务器端的代码——当然这种模式现在已经几乎被各种web开发采用了。

扯远了。我们今天要掌握的很少,我比较喜欢用很少的代码来写demo,这样大家比较容易掌握(内容有点低级,大神请绕道)。

我们建一个这样的web项目:

首先写客户端的html代码

复制代码 代码如下:

<table>
    <thead>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>班别</td>
            <td>性别</td>
            <td>电话</td>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<input id="btnget" type="button" value="加载数据" />

js代码

复制代码 代码如下:

$(function () {
    $("#btnget").click(function () {
        $.ajax({
            type: "post",
            dataType: "json",
            url: "data.ashx",
            success: function (msg) {
                var str = "";
                for (i in msg) {
                    str += "<tr><td>" + msg[i].id + "</td><td>" + msg[i].name + "</td><td>" + msg[i].cla + "</td><td>" + msg[i].sex + "</td><td>" + msg[i].tel + "</td></tr>";
                }
                $("tbody").append(str);
            }
        });
    });
});

为了使表格好看一些,我们定义一下它的样式

复制代码 代码如下:

<style type="text/css">
    table {
        border-collapse: collapse;
    }
    table td {
        text-align: center;
        border: 1px solid gray;
        padding: 3px 10px;
    }
</style>

然后写服务器端返回json数据的代码

复制代码 代码如下:

string data = "[{\"id\":\"2010324268\",\"name\":\"林宇\",\"cla\":\"10软件\",\"sex\":\"男\",\"tel\":\"13800138000\"},{\"id\":\"2010324256\",\"name\":\"李四\",\"cla\":\"10网络\",\"sex\":\"女\",\"tel\":\"10010\"},{\"id\":\"2010324264\",\"name\":\"张三\",\"cla\":\"10软件\",\"sex\":\"男\",\"tel\":\"10086\"}]";
context.Response.Write(data);

这里我直接把json数据写好格式了。一般来说是需要从数据库把数据读取出来然后拼凑成json格式,或者可以使用别人写好的一些序列化成json数据的类,当然,我更建议你自己写一个,生成一个类库方便以后使用。

如果需要解释一下json是什么,它是和xml等等一些数据并列的一种数据格式,形如:[{"id":"1","name":"张三","age":"20"},{"id":"2","name":"李四","age":"18"}]这样的格式。

这应该是每个web开发的人员都应该掌握的基础技术吧。

时间: 2024-10-03 10:31:10

浅析ajax请求json数据并用js解析(示例分析)_jquery的相关文章

ajax请求json数据并用js解析

这应该是每个web开发的人员都应该掌握的基础技术,需要的朋友可以参考下   自从接触了jquery就喜欢上了前端开发,而且深深感受到了前端开发的强大与重要之处.同时也想为asp.net鸣不平,事实上asp.net并 没有臃肿,说它臃肿的人无非是那些不了解它的人,可能他们看见过一些asp.net低级程序员在不断往页面里拖控件,然后发现生成的页面中含有大量的垃圾 代码,而且几乎把所有的逻辑处理都写在了服务器端,觉得服务器压力太大了.事实上,刚入门asp.net的人会有拖控件的习惯,但是当你再深入你会

ajax请求json数据案例详解_AJAX相关

今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求. 如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class="conSixmap"> <div class="name conmap01" data-name="beimeizhou"> <a href="javascript:void(0)">北美洲<

ajax请求json数据案例详解

今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求. 如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class="conSixmap"> <div class="name conmap01" data-name="beimeizhou"> <a href="javascript:void(0)">北美洲<

浅析json与jsonp区别及通过ajax获得json数据后格式的转换_AJAX相关

 有关json与jsonp的区别(json才是目的,jsonp只是手段)介绍如下所示: 一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展.简单地讲,json其实就是JavaScript中的对象(Object)和数组(Array,其实也是对象)这倆好基友在那儿你嵌我我嵌你地套上n多层,以此模拟出许多复杂的数据结构. json易于人阅读和编写,也易于

Ajax异步请求JSon数据(图文详解)_AJAX相关

上一篇讲了Ajax请求数据text类型,text和html都是处理比较简答的数据,而在编程过程中使用Ajax调用数据的时候,难免要进行逻辑的处理,接受的数据也变的复杂比如数组类型的数据,这时候就需要使用JSON数据类型进行处理,今天就说说,JSON数据请求过程中的一些细节: 友情提醒本文所需工具和原料如下: wamp或lamp环境.jquery.js.编辑器 具体方法/步骤请看下面: 1.创建基本的文件结构json_ajax.html和json_ajax.php,下载jquery.js,如图:

《项目经验》--通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中

问题描述 此帖子内容是我做项目时用到,自己琢磨出来的,可能还有很多纰漏之处,在此分享!互相交流,互相学习,有不对的地方,欢迎大家指正!具体内容见博客<<项目经验>--通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中>:http://blog.csdn.net/mazhaojuan/article/details/8592015先看一下我要实现的功能界面:这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页

Ajax异步请求JSon数据(图文详解)

上一篇讲了Ajax请求数据text类型,text和html都是处理比较简答的数据,而在编程过程中使用Ajax调用数据的时候,难免要进行逻辑的处理,接受的数据也变的复杂比如数组类型的数据,这时候就需要使用JSON数据类型进行处理,今天就说说,JSON数据请求过程中的一些细节: 脚本之家友情提醒本文所需工具和原料如下: wamp或lamp环境.jquery.js.编辑器 具体方法/步骤请看下面: 1.创建基本的文件结构json_ajax.html和json_ajax.php,下载jquery.js,

$.ajax传JSON数据到后台出现报错问题解决

 $.ajax传JSON数据到后台时总会出现一些错误,本文整理了一些注意事项,感兴趣的朋友可以参考下 代码如下: $.ajax({  url: "../Services.ashx",  type: "POST",  //data: { 'data': { 'typename': JSON.stringify(typename) }, 'operationType': '2' },  data: { 'data': typename, 'operationType':

jQuery通过Ajax返回JSON数据

  jQuery通过Ajax返回JSON数据          最近在使用JQuery的ajax方法时,要求返回的数据为json数据,在处理的过程中遇到下面的几个问题,那就是采用不同的方式来生成json数据的时候,在$.ajax方法中应该是如何来处理的,下面依次来进行说明. 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据. JSON(JavaScript