前端json格式数据用原生ajax提交，多维数组

最新推荐文章于 2023-07-05 00:02:32 发布

洋葱 ☠

最新推荐文章于 2023-07-05 00:02:32 发布

阅读量296

点赞数 2

分类专栏：前端文章标签：原生ajax json多维数组

本文链接：https://blog.csdn.net/qq_22385935/article/details/95753514

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>
<script>
//传递参数
var data={
    "plan_money": '3000',
    "days": [
        {
            "m": "2019-6",
            "day": [
                '10',
                '25'
            ]
        }
    ],
    "number": '4',
    "ccid": '6'
};
function ajaxJson( obj,params,str = "" )
{
    for( key1 in obj){
        var key2 =  str ? str+"["+ key1 +"]" : key1;
        if(typeof(obj[key1])=="object" ){
            ajaxJson( obj[key1],params,key2  );
        }else{
            params.push(key2 + '=' + obj[key1]);
        }
    }
}

/* 封装ajax函数
 * @param {string}opt.type http连接的方式，包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
 * @param {object}opt.data 发送的参数，格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
 */

function ajaxFn(opt) {
    opt = opt || {};
    opt.method = opt.method.toUpperCase() || 'POST';
    opt.url = opt.url || '';
    opt.async = opt.async || true;
    opt.data = opt.data || null;
    opt.success = opt.success || function() {};
    opt.error = opt.error || function() {};
    // if(opt.url!=" "){
    //     opt.url='http://192.168.0.213:8080/m/'+opt.url;
    // }
    var xmlHttp = null;
    if (XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    } else {
        xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
    }
    var params = [];

    ajaxJson(  opt.data ,params );

    console.log(params)
    var postData = params.join('&');
    if (opt.method.toUpperCase() === 'POST') {
        xmlHttp.open(opt.method, opt.url, opt.async);
        xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
        xmlHttp.send(postData);
        console.log(postData)
    } else if (opt.method.toUpperCase() === 'GET') {
        xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
        xmlHttp.send(null);
    }
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            opt.success(JSON.parse(xmlHttp.responseText));
        }else if(xmlHttp.status != 200){
            var data=JSON.stringify(opt.data);
            opt.error(opt.url+"---"+data+"---"+xmlHttp.status);
        }
    };
}
// 调用
ajaxFn({
    method: 'POST',
    url: 'http://192.168.0.213:8080/m/Perfectrefund/createPlan',
    data:JSON.parse( JSON.stringify( data ) ),
    success: function (ret) {
        console.log(ret)
        if(ret.status==1){
            // 循环显示银行列表
            showData(ret.data.list);
        }
    },
    error: function (err) {
       console.log(err);
    }
});

</script>

成功传递
在这里插入图片描述

洋葱 ☠

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端json格式数据用原生ajax提交，多维数组

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫