ajax跨域访问，？？数据混乱？？。-php教程-PHP中文网

ajax跨域访问，？？数据混乱？？。

php中文网

发布： 2016-09-08 08:43:55

原创

918人浏览过

我也无法描述清楚，直接上代码吧

根据id获取文章

<code class="js">/api/article/getOne?id=' + id</code>

登录后复制

数据

<code class="json">{
  "code": 200,
  "data": {
    "id": "17",
    "cateId": "2",
    "name": "视频",
    "studioId": "2",
    "title": "wegwg网服务范围",
    "content": "<p><b>gw3g3wg3wg</b></p><p><b>3wgf</b></p><p><b>gf3wg</b></p>",
    "createdAt": "2016-09-06 16:18:05"
  }
}</code>

登录后复制

获取所有文章分类

<code class="js">/api/category/get</code>

登录后复制

数据

<code>{
  "code": 200,
  "data": [
    {
      "id": "1",
      "name": "推荐"
    },
    {
      "id": "2",
      "name": "视频"
    },
    {
      "id": "3",
      "name": "瘦身"
    },
    {
      "id": "4",
      "name": "隐私"
    }
  ]
}</code>

登录后复制

上面的接口单独调用正常，问题出现在下面。应用的场景是：载入编辑页面时，调用接口，获得数据填充到页面。

ajax跨域访问，？？数据混乱？？。

Boomy

AI音乐生成工具，创建生成音乐,与世界分享.

272

查看详情

页面真实代码

<code class="js">//编辑文章，载入页面时，获取编辑数据并填充页面
            $.ajax({
                url: '/api/article/getOne?id=' + id, //获取某条文章的信息
                type: 'get',
                dataType: 'json',
                beforeSend: function () {
                    $('#show_load').show();
                },
                success: function (article) {
                    console.log(article);
                    if (article.code != 200) return false;
                    $('#title').val(article.data.title); //文章标题
                    const content = htmlspecialchars_decode(article.data.content);
                    $('#summernote').summernote('code', content); //文章内容
                    $.ajax({
                        url: '/api/category/get', //获取所有分类
                        type: 'get',
                        dataType: 'json',
                        beforeSend: function () {
                            $('#show_load').show();
                        },
                        success: function (categorys) {
                            console.log(categorys); //问题出现在这里，打印出来的id全部为
                            if (categorys.code != 200) return false;
                            $('#categoryId').empty();
                            $('#categoryId').append(`<option value="0">请选择分类</option>`);
                            categorys.data.forEach(function (v) {
                                if(v.id = article.data.cateId){
                                    $('#categoryId').append(`<option value="${v.id}" selected>${v.name}</option>`)
                                }else{
                                    $('#categoryId').append(`<option value="${v.id}">${v.name}</option>`)
                                }
                            })

                        },
                        complete: function () {
                            $('#show_load').hide();
                        }
                    });

                },
                complete: function () {
                    $('#show_load').hide();
                }
            });</code>

登录后复制

这时打印出来的数据如下：所有分类id全部变成“1”了。原来的文章分类id也确实是“1”。但是这里全部都变成1了，到底怎么回事？

ajax跨域访问，？？数据混乱？？。

<code>{
  "code": 200,
  "data": [
    {
      "id": "1",
      "name": "推荐"
    },
    {
      "id": "1",
      "name": "视频"
    },
    {
      "id": "1",
      "name": "瘦身"
    },
    {
      "id": "1",
      "name": "隐私"
    }
  ]
}</code>

登录后复制

之前这样写是可以正常工作的。但是今天不知道为什么变成这样了。迷茫了，^$^。

回复内容：

我也无法描述清楚，直接上代码吧

根据id获取文章

<code class="js">/api/article/getOne?id=' + id</code>

登录后复制

数据

<code class="json">{
  "code": 200,
  "data": {
    "id": "17",
    "cateId": "2",
    "name": "视频",
    "studioId": "2",
    "title": "wegwg网服务范围",
    "content": "<p><b>gw3g3wg3wg</b></p><p><b>3wgf</b></p><p><b>gf3wg</b></p>",
    "createdAt": "2016-09-06 16:18:05"
  }
}</code>

登录后复制

获取所有文章分类

<code class="js">/api/category/get</code>

登录后复制

数据

<code>{
  "code": 200,
  "data": [
    {
      "id": "1",
      "name": "推荐"
    },
    {
      "id": "2",
      "name": "视频"
    },
    {
      "id": "3",
      "name": "瘦身"
    },
    {
      "id": "4",
      "name": "隐私"
    }
  ]
}</code>

登录后复制

上面的接口单独调用正常，问题出现在下面。应用的场景是：载入编辑页面时，调用接口，获得数据填充到页面。

ajax跨域访问，？？数据混乱？？。

页面真实代码

<code class="js">//编辑文章，载入页面时，获取编辑数据并填充页面
            $.ajax({
                url: '/api/article/getOne?id=' + id, //获取某条文章的信息
                type: 'get',
                dataType: 'json',
                beforeSend: function () {
                    $('#show_load').show();
                },
                success: function (article) {
                    console.log(article);
                    if (article.code != 200) return false;
                    $('#title').val(article.data.title); //文章标题
                    const content = htmlspecialchars_decode(article.data.content);
                    $('#summernote').summernote('code', content); //文章内容
                    $.ajax({
                        url: '/api/category/get', //获取所有分类
                        type: 'get',
                        dataType: 'json',
                        beforeSend: function () {
                            $('#show_load').show();
                        },
                        success: function (categorys) {
                            console.log(categorys); //问题出现在这里，打印出来的id全部为
                            if (categorys.code != 200) return false;
                            $('#categoryId').empty();
                            $('#categoryId').append(`<option value="0">请选择分类</option>`);
                            categorys.data.forEach(function (v) {
                                if(v.id = article.data.cateId){
                                    $('#categoryId').append(`<option value="${v.id}" selected>${v.name}</option>`)
                                }else{
                                    $('#categoryId').append(`<option value="${v.id}">${v.name}</option>`)
                                }
                            })

                        },
                        complete: function () {
                            $('#show_load').hide();
                        }
                    });

                },
                complete: function () {
                    $('#show_load').hide();
                }
            });</code>

登录后复制

这时打印出来的数据如下：所有分类id全部变成“1”了。原来的文章分类id也确实是“1”。但是这里全部都变成1了，到底怎么回事？

ajax跨域访问，？？数据混乱？？。

<code>{
  "code": 200,
  "data": [
    {
      "id": "1",
      "name": "推荐"
    },
    {
      "id": "1",
      "name": "视频"
    },
    {
      "id": "1",
      "name": "瘦身"
    },
    {
      "id": "1",
      "name": "隐私"
    }
  ]
}</code>

登录后复制