js对ajax返回数组的处理介绍

 更新时间:2014年02月20日 09:05:16   作者:  
本篇文章主要是对js对ajax返回数组的处理进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助

引言:
ajax异步传输,可以传输字符串,但是数组这样的数据,就不太好传递了,这个时候怎么办呢?

答案是可以通过json来处理,后台将数据数据进行json编码!

然后客户端,通过js来进行解析。

这样问题就解决了!json是一种很好的数据格式!

我做的是异步判断某堂课是否处于上课状态,会从后台接口中获取数组数据!共四堂课,

代码如下:

复制代码 代码如下:

function ajaxcheckedlessonsAction(){
        //3583 语文 8班
        //1500 语文 9班
        //2717 物理 8班
        //1612 物理 9班
        $whereLessons = array();
        $whereLessons['lessons.id IN(?)'] = array(3583, 1500, 2717, 1612);
        $daoLessons = new dao_lessons();
        $alllessons = $daoLessons->getLessons($whereLessons);
        //print_r($alllessons);exit;
        $lessonsChecked = array();
        foreach ($alllessons as $lessons) {
            if ($lessons['id'] == 3583) {
                $lessonsChecked['8yuwen'] = $this->verifyCheckedLessons($lessons['startime'], $lessons['endtime']);
            } elseif ($lessons['id'] == 1500) {
                $lessonsChecked['9yuwen'] = $this->verifyCheckedLessons($lessons['startime'], $lessons['endtime']);
            } elseif ($lessons['id'] == 2717) {
                $lessonsChecked['8wuli'] = $this->verifyCheckedLessons($lessons['startime'], $lessons['endtime']);
            } elseif ($lessons['id'] == 1612) {
                $lessonsChecked['9wuli'] = $this->verifyCheckedLessons($lessons['startime'], $lessons['endtime']);
            }
        }
        $json = json_encode($lessonsChecked);
        echo $json;
    }

接口处理数据,将数据json化,

前台对json数据进行解析

复制代码 代码如下:

//进入页面就进行的处理
        $.ajax({
            type: "POST",
            url:"/default/index/ajaxcheckedlessons",
            data:"",
            success:function(response){
                if(response){
                    var data = eval('('+response+')');
                    if(data['8yuwen']){
                      $("#8yuwen").attr("style","color:red;");
                    }else{
                      $("#8yuwen").attr("style",""); 
                    }
                    if(data['8wuli']){
                      $("#8wuli").attr("style","color:red;");
                    }else{
                      $("#8wuli").attr("style",""); 
                    }
                    if(data['9yuwen']){
                      $("#9yuwen").attr("style","color:red;");
                    }else{
                      $("#9yuwen").attr("style",""); 
                    }
                    if(data['9wuli']){
                      $("#9wuli").attr("style","color:red;");
                    }else{
                      $("#9wuli").attr("style",""); 
                    }
                }else{
                    alert("error");
                }
            }
        });

红色部分就是json的核心代码。

这样就完成了数组的处理!异步数组数据传递!

相关文章

  • 谈谈Ajax原理实现过程

    谈谈Ajax原理实现过程

    Asynchronous javascript and xml(ajax),实现了客户端与服务器进行数据交流过程。使用技术的好处是:不用页面刷新,并且在等待页面传输数据的同时可以进行其他操作
    2015-11-11
  • 基于原生ajax与封装的ajax使用方法(详解)

    基于原生ajax与封装的ajax使用方法(详解)

    下面小编就为大家带来一篇基于原生ajax与封装的ajax使用方法(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Ajax获取到数据放入echarts里不显示的原因分析及解决办法

    Ajax获取到数据放入echarts里不显示的原因分析及解决办法

    在做一个需要用到echarts地图的项目的时候,成功通过ajax获取到了后台提供的数据,并生成了想要的JSON串。但是,放到echarts option.series[0].data里,获取不到数据。在生成的地图上无法看到你从后台获取到的值,下面小编给大家分享我的解决办法,需要的朋友参考下
    2016-01-01
  • Ajax的使用四大步骤

    Ajax的使用四大步骤

    ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。接下来通过本文给大家介绍Ajax的使用四大步骤,非常不错,感兴趣的朋友看下吧
    2016-07-07
  • 解决微信返回上一页,页面中的AJAX的请求,对Get请求无效的问题

    解决微信返回上一页,页面中的AJAX的请求,对Get请求无效的问题

    这篇文章给大家介绍微信返回上一页,页面中的AJAX的请求,对Get请求无效的问题分析及解决方法,需要的朋友参考下
    2017-01-01
  • ajax三级联动的实现方法

    ajax三级联动的实现方法

    这篇文章主要为大家详细介绍了ajax三级联动的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • AJAX应用中必须要掌握的重点知识(分享)

    AJAX应用中必须要掌握的重点知识(分享)

    下面小编就为大家带来一篇AJAX应用中必须要掌握的重点知识(分享)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • ajax中文乱码的各种解决办法总结

    ajax中文乱码的各种解决办法总结

    下面总结了在不同编程语言中出现ajax中文乱码的各种解决办法,下面有需要的朋友可参考一下
    2012-09-09
  • AJAX客户端说明,XMLHttpRequest对象

    AJAX客户端说明,XMLHttpRequest对象

    AJAX客户端说明,XMLHttpRequest对象...
    2007-01-01
  • 如何封装一个Ajax函数

    如何封装一个Ajax函数

    这篇文章主要介绍了如何封装一个Ajax函数,帮助大家更好的理解和学习网络编程,感兴趣的朋友可以了解下
    2021-05-05

最新评论