Jquery和Javascript 实际项目中写法基础-ajax和json (3)

一.什么是JSON数据?

一种轻量级的数据交换格式。实际中知道如何使用即可。

软件开发我认为就是一个会用,然后知其原理的过程.

例子如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
        <script type="text/javascript">

        //定义一个数组
        var jsonStudents=[];

        //数组中创建json对象
        for(var i=0; i <5;i++)
        {
          var jsonObj={ name:‘‘,no:‘‘};
          jsonObj.name=‘student_‘+i.toString();
          jsonObj.no=‘current_no_‘+i.toString();
          jsonStudents.push(jsonObj);
        }

        //根据json对象创建自己需要的html字符串
        var formatRow=function(obj){
            var rowHtml="<tr><td>"+obj.no+"</td>"
                        +"<td>"+obj.name+"</td></tr>";
                        return rowHtml;
        };

        //创建table,根据数据列表
        var createTable=function(){
           for(var i=0; i <5;i++)
            {
              var rowHtml=formatRow(jsonStudents[i]);
               $("table").append(rowHtml);
            }
        };

        </script>
        <title></title>
    </head>
    <body onload="createTable()">
        <table>
            <tr>
                <th>编号</th>
                <th>姓名</th>
            </tr>
        </table>
    </body>
</html>

二.  什么是ajax以及怎么使用?

ajax,具体是什么,可以自己查资料脑补,个人觉得其实一个请求,类似于我们跟妹子说话,妹子是否搭理你 一样的,你和别人说的第一句话,就是发送了一个请求,对方跟你回复了一句话,叫做返回数据,我们能听的懂,这叫进行数据解析,然后就可以自己处理 自己和妹子愉快的聊天了。

请求在网站开发中不可少,返回数据,可以是文件 可以是图片 可以是字符串  可以是json 对象  数值.等等

前端UI,不需要关心后台代码实现,只需要知道数据如何处理 请求如何发送,明白道理即可。

先来分析一下博客园的登陆,来理解下请求和返回数据:

当你登录的时候,会向服务器发送一个登录入的请求,然后服务器会返回给你数据。

{"success":false,"message":"该用户不存在"}

ajax请求的写法是确定的,参数和url  是不确定的,以及ajax还有其他选项设置,比如同步异步,是否缓存。

基本写法如下:

$.ajax({
             url:url, //要请求的地址
             data:para,//请求附带的一些参数信息
             dataType:"json",
             success:function(data){
                 //请求执行成功,执行该方法,参数为服务器传递来的数据
            }
        });

说明:

无论多么复杂的json 数据,只要分清楚对象 和数组的概念, {} 包裹起来是一个完整的对象,[]包裹起来的是一个数组 ,那么 [ [],[],[] ]  这是什么呢?

[{},{},{},[] ] ?

分析道理就是数组中,包含了3个元素,3个元素均为[].  后面那个就是 数组对象中包含了 4个元素,4个元素,3个为json 对象,一个为数据元素。

时间: 2024-08-28 11:20:11

Jquery和Javascript 实际项目中写法基础-ajax和json (3)的相关文章

Jquery和Javascript 实际项目中写法基础 (1)

一.JS 是什么,jquery 是什么  就不说明了,直接说一般使用是怎么样的 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-1.11.0.js" ></script> <script type="text

项目中使用的ajax异步读取数据结构设计

设计稍微复杂了一点,完成ajax读取功能涉及到了很多页面.虽然如此,但感觉比较灵活. 和传统方法唯一的区别在于多了一层数据容器控件,里面提供了显示数据的HTML元素及相应的JS方法. 这样数据控件指生成纯数据. ajax异步读取 使用了jQuery.ajax,通过ajax POST方式请求后台处理ashx页面,并传递相关参数. ashx 完成动态加载用户控件,并根据接收的参数对控件的属性进行赋值. 加载控件,借助于博客园老赵的一篇博文,链接找不到了,以后再补. public class View

项目中lua(基础)

关于项目中lua任务(某些没弄懂,但lua上耗费时间有点长了不看了) 这段时间看了lua语法和项目中lua应用 1.在lua中注册c库,在lua5.2中好像都是注册c库,相当于在lua中定义一个table,key是函数名字,value是函数指针 m_spLuaState->RegLib("game", funcs); 2.加载项目中所有lua并执行 刚开始不知道那个dofile具有执行lua的功能,结果是返回0表示成功,执行lua就是执行其中定义的一些函数和全局变量(普通变量,表

spring web(SpringBoot,SpringMVC)项目中返回自定义格式的JSON,不暴露不必要的字段

笔者的web项目中使用RESTFul规范和前台进行交互. 原始代码 返回的json数据格式如下: 对应的后台实体类及交互方法: JsonResult.java public class JsonResult { private int code; private String message; private String nextUrl; private Object data; public JsonResult(int code, String message) { this.code =

基础-Ajax,json

ajax是异步交互,也就是说发送请求,到响应回来,页面只是局部刷新. Ajax 步骤: 获取XMLHttpRequest对象 绑定一个回调函数 open send 在回调函数中完成操作. json是一种特定数据结构的字符串 json结构有两种 对象 用大括号括起来,里面以键值对的形式存储,key是携带过去的参数的名字,value是携带过去的值. 数组 用中括号括起来. 数组,Collection集合转换成json数据使用    JsonArray.fromObject(对象); Map,java

项目中碰到的Ajax相关的问题记录

需求描述: 第一步:通过controller1,进入到前端页面1,输入计算参数,点击按钮,对数据进行处理: 第二步:通过Ajax异步操作进入到controller2,得到数据之后,返回给Ajax,在success函数中进行显示,或者带数据进行页面跳转: 第三步:最后在新的页面进行数据展示. 问题一:Ajax参数问题(ps:要搞清楚各参数代表的意义,否则无从下手): 这里列出几个比较常用的参数:(.ajax,.get,.post,.getJson几种方法基本差不多) url: (String) 请

十、VueJs 填坑日记之在项目中使用Amaze UI

上一篇博文,我们把jQuery集成到了项目中,今天我们来集成Amaze ui(妹子UI).先来介绍一下妹子UI.Amaze UI 含近 20 个 CSS 组件.20 余 JS 组件,更有多个包含不同主题的 Web 组件,可快速构建界面出色.体验优秀的跨屏页面,大幅提升开发效率.最主要是妹子UI的性能好,轻量级. 获取妹子UI(Amaze UI)下载地址:http://amazeui.org/getting-started 点击上方绿色的按钮,我们来下载最新版的妹子UI,下面有配套的文档和编辑器,

JSONKit在项目中使用设置(ARC与方法更新)

在项目中经常会遇到解析json的情况,如果有同学想要解析JSON,那么JSONKit可以是一个不错的选择. git中JSONKit 的地址为:https://github.com/johnezang/JSONKit 由于项目已经很久没有更新,仍然使用了MRC,因此在使用时需要做几处修改: 1.把JSONKit设置为不支持arc的模式,在Build Phases ->Compile Sources 选择文件双击,在对话框中添加“-fno-objc-arc”参数(不含引号). 2.此时编译仍然会出现

在前后端分离的SpringBoot项目中集成Shiro权限框架

项目背景 公司在几年前就采用了前后端分离的开发模式,前端所有请求都使用ajax.这样的项目结构在与CAS单点登录等权限管理框架集成时遇到了很多问题,使得权限部分的代码冗长丑陋,CAS的各种重定向也使得用户体验很差,在前端使用vue-router管理页面跳转时,问题更加尖锐.于是我就在寻找一个解决方案,这个方案应该对代码的侵入较少,开发速度快,实现优雅.最近无意中看到springboot与shiro框架集成的文章,在了解了springboot以及shiro的发展状况,并学习了使用方法后,开始在网上