js——ajax 传递 json 数据

最新推荐文章于 2024-08-07 18:11:48 发布

肖ZE

最新推荐文章于 2024-08-07 18:11:48 发布

阅读量1.1w

点赞数 3

分类专栏： javascript

本文链接：https://blog.csdn.net/lucky541788/article/details/81807916

版权

javascript 专栏收录该内容

89 篇文章 2 订阅

订阅专栏

修改 wamp64 上传问题
在这里插入图片描述
json数据

{
"name":"sdfad",
"age":"2354"
}

PHP后台

<?php
$file = file_get_contents("12-ajax-json.txt");
header('Content-Type: application/json; charset=utf8');
//传值给前端
echo json_encode($file);
?>

前台数据接收

<script>
        window.onload = function () {
            var btn = document.getElementById('btn');
            btn.onclick = function () {
                Ajax({
                    url: '12-ajax-json.php',
                    type: 'Post',
                    data:{},
                    timeout: 3000,
                    success: function (j) {
                        var json=j.responseText;
                        console.log(json);
                        //parse在IE8及以下不支持 需引入json2.js框架兼容
                        var obj=JSON.parse(json);
                        console.log(obj.name);
                        console.log(obj.age);
                    },
                    error: function (j) {
                        console.log(j.status);
                    }
                })
            }
        }
    </script>

<body>
<button id="btn">click</button>
</body>

json 数据和 js 对象互换：
在这里插入图片描述

// 转 json （字符串）
var json=JSON.stringify(obj);
// 转 obj （数组）
var obj=JSON.parse(json);//仅可转换标准json数据
var obj=eval("("+json+")");//万能转换

ps：若想知道Ajax封装函数请看：Ajax封装

标准jq的ajax方法

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

//加载新闻
function loadNews() {
    $.ajax({
        url: '',
        type: 'post',
        data: {},
        success: function (data) {
            console.log(data);
            
            var json = eval("(" + data + ")");
            console.log(json);
            
            if (num <= Object.keys(json).length) {
                bodyFather.innerHTML += news(json[num - 1]);
                num++;
            } else {
                num = Object.keys(json).length + 1;
            }
        },
        error: function (json) {
            console.log(json.status);
        }
    });
}

dataType
类型：String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值：

“xml”: 返回 XML 文档，可用 jQuery 处理。
“html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
“json”: 返回 JSON 数据。
“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
“text”: 返回纯文本字符串