【问题标题】:How to pass an array using PHP & Ajax to Javascript?如何使用 PHP 和 Ajax 将数组传递给 Javascript?
【发布时间】:2011-11-07 22:46:13
【问题描述】:

抱歉,如果这个解释不清楚,我也很难理解。 如何使用 PHP 和 Ajax 将数组发送到 Javascript? 我正在使用 Ajax 获取一组照片,然后我希望将其附加到页面上的空 <div> .

jQuery 如下所示:

$.ajax({
    url: "<?php echo site_url('demo/getPhotos/'); ?>",
    type: 'POST',
    data: form_data,
    success: function(data) {
        alert(data);
   }

PHP 函数 getPhotos 如下所示:

<?php

$photos = array();

foreach ($data as $photo) {
    array_push($photos,$photo['source']);
    }

// echo json_encode($photos); How should I be returning $photos?

如果我只是echo $photos;,数据会发送到成功回调,但它似乎不是可用的格式。

如果我在 PHP 中执行var_dump($photos),结果如下所示:

array(4) {
  [0]=>
  string(14) "some_image.jpg"
  [1]=>
  string(14) "some_image.jpg"
  [2]=>
  string(14) "some_image.jpg"
  [3]=>
  string(14) "some_image.jpg"
}

我尝试了json_encode 等的各种组合,但实际上我只是在猜测,并不确定其背后的理论。在这种情况下,将数据从 PHP 传递到 Javascript 的最佳方式是什么?

【问题讨论】:

    标签: php javascript jquery ajax json


    【解决方案1】:

    试试:

    $.ajax({
        url: "<?php echo site_url('demo/getPhotos/'); ?>",
        type: 'POST',
        data: form_data,
        dataType:"json",
        success: function(data) {
            alert(data[0]);
       }
    

    在 PHP 方面,您会想要打印:

    print json_encode($photos);
    

    为了更好地封装代码,您可能会尝试的另一件事是:作为进一步 JSON 优势的示例:

    print json_encode(array("photolist"=>$photos,"photo_owner"=>"Me!"));
    

    然后在服务器上,您可以通过以下方式访问这些:

    data.photolist[0]; //First photo
    data.photo_owner;  //The owner of the photo set
    

    【讨论】:

    • 完美,谢谢。您是否愿意详细说明更好地封装代码的优势?
    • 当然,@Joe。如果您只想返回照片列表,那么您所拥有的就可以了。但是,如果稍后您决定要返回有关每张照片的更多信息,则关联数组很有用,因为它提供了一种在 JS 中访问数据的好方法。另一种方法可能是让每张照片成为一个关联数组并返回一个关联数组数组,例如:array(array("name"=&gt;"Photo1","file"=&gt;"img1.jpg"), array("name"=&gt;"Weekend at the Beach","file"=&gt;"imgs/beachphoto.jpg"))
    • @Joe:执行上述操作的优势与您尝试使用代码实现的目标相关。如果您后来发现自己在做一些复杂的事情来取回您的数据,请记住我们进行过这次对话,也许这会对您有所帮助 :-) 这是否澄清了事情?
    • 你从哪里得到data: form_data,
    【解决方案2】:

    我在 PHP 中并在请求结束时创建了一个数组 $result

     echo json_encode($result); 
    

    在 JS 中 $.post 处理函数:

    var obj = $.parseJSON(data);
    var v = data.k; 
    

    其中k 是关联数组中的键值。

    【讨论】:

    • Javascript 中没有关联数组,只有对象。
    • 您可能还想检查在 AJAX 调用中返回的值是否不为 NULL
    • Marelo,我的意思是关联数组的键,在 PHP 文件中制作 :)
    • 用 $.parseJSON 调用保存了我的培根。谢谢!
    【解决方案3】:

    json_encode 绝对是要走的路。 jQuery 甚至内置了解析 JSON 的支持。你可以使用例如

    $.ajax({
        url: "<?php echo site_url('demo/getPhotos/'); ?>",
        type: 'POST',
        data: form_data,
        dataType: 'json', // will automatically convert array to JavaScript
        success: function(array) {
            alert(array[0]); // alerts first string
        }
    });
    

    【讨论】:

      【解决方案4】:

      返回json本身,然后在js中通过循环json构造数组,如下:

      var array=[];
      for(var key in json)
      {    
          if(json.hasOwnProperty(key))
            array.push(json[key]);
      }
      

      或者您可以简单地使用 json 本身以任何需要数组的原因?

      类似 json[0] 或 json[1] 等

      【讨论】:

        【解决方案5】:

        json_encode rulez 当你需要这些东西时。

        我最近也学到了这个很酷的东西!以下是你的做法:

        function jsonResponse($array) {
             header('Content-type: application/json; charset=utf-8;');
             die(json_encode($array));
        }
        

        这是可选的,如果你想这样做,你不必这样做,但是在我的MVC系统中,我倾向于这样写......所以首先我发出一个ajax请求(原型),到一个脚本, 后面调用这个函数 jsonResponse 我之前提到过...

            new Ajax.Request('URL',
        {
            method:'post',
            onSuccess: function(transport){
                res = transport.responseJSON;
                $('actionInformation').update(res.username);
            },
            onFailure: function(){
                alert('Something went wrong...')
            }
        });
        

        这是 jscript 代码,注意 res.msg,这是我们可以操作数组的地方。但是,一定要在你的 PHP 中发送 JSON 格式的响应,使用 jsonResponse 函数,它很容易使用,例如,你的 php 函数看起来像这样:

        function ajax_get_user() {
             $userName = 'Adrian';
             $active = 1;
             jsonResponse(array('username' => $username, 'active' = $active));
        }
        

        以后就可以轻松搞定了,res.username,res.active。

        我认为应该这样做!

        【讨论】:

          猜你喜欢
          • 2021-02-10
          • 2014-05-12
          • 1970-01-01
          • 2016-04-22
          • 2018-02-06
          • 2014-06-21
          • 1970-01-01
          • 2014-03-05
          • 2016-11-05
          相关资源
          最近更新 更多