原生JS的ajax,原生ajax传递参数格式,ajax参数传递,ajax传递参数

有点坑爹的是参数的格式组装的问题,看图
原生JS的ajax,原生ajax传递参数格式,ajax参数传递,ajax传递参数_第1张图片

js中json对象和字符串的转换


JSON.parse() : 字符串–>json对象

    //手动组装json对象
    var configData ={               
        "projectDir":weiXinConfig[key].projectDir,
        "appid":weiXinConfig[key].appid,
        "projectname":weiXinConfig[key].projectname,
        "version":weiXinConfig[key].version,
        "desc":weiXinConfig[key].desc           
    }
    input.value = JSON.stringify(configData);


    //注意:
    单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常。
    var str = '{"name":"huangxiaojian","age":"23"}'
    JSON.parse(str)

    结果: 
    Object
        age: "23"
        name: "huangxiaojian"
        __proto__: Object

JSON.stringify() : json对象–>字符串

    var a = {a:1,b:2}
    JSON.stringify(a)

    结果: 
    "{"a":1,"b":2}"

<html>
<head>
    <meta charset='UTF-8'>
    <title>title>
head>
<body>
body>
<script src="jquery.js">script>
<script type="text/javascript">
    console.log("字符串" + "--->" + "json对象");
    var str1 = '{"name":"huangxiaojian","age":"23"}';//单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常。
    obj1 = JSON.parse(str1);
    console.log(str1 + "--->");
    console.log(obj1);
    console.log("json对象" + "--->" + "字符串");
    var obj2 = {a: 1, b: 2};
    str2 = JSON.stringify(obj2);
    console.log(obj2);
    console.log('--->' + str2);
    console.log("数组" + "--->" + "字符串");
    var array = ["1", "2"];
    str3 = JSON.stringify(array);
    console.log(array);
    console.log('--->' + str3);
script>
html>

下面是自己写的—原生ajax请求服务器

<script>
    function success(weiXinConfig) {
        console.log("这是微信getConfig回调函数"+ weiXinConfig);
        // weiXinConfig = JSON.parse(weiXinConfig);
        // document.getElementById('appid').value = weiXinConfig.appid;
        // document.getElementById('projectname').value = weiXinConfig.projectname;
        // document.getElementById('version').value = weiXinConfig.version;
    }
    function upload(weiXinConfig){
        //weiXinConfig = JSON.parse(weiXinConfig);
        console.log("这是微信upload回调函数"+ weiXinConfig);

        //var weiXinConfig = JSON.parse(weiXinConfig);
        //console.log(weiXinConfig);
        // document.getElementById('appid').value = weiXinConfig.appid;
        // document.getElementById('projectname').value = weiXinConfig.projectname;
        // document.getElementById('version').value = weiXinConfig.version;

        //var pic_qrCode = document.getElementById('pic_qrCode');
        //pic_qrCode.display="block";
    }
    function ajax_method(url,data,method,success){      
        var ajax = new XMLHttpRequest();
        if (method=='get') {
            if (data) {
                url+='?';
                url+=data;
            }else{
            }
            ajax.open(method,url);
            ajax.setRequestHeader("X-Requested-With","XMLHttpRequest"); 
            ajax.send();
        }else{
            ajax.open(method,url);
            ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            ajax.setRequestHeader("X-Requested-With","XMLHttpRequest"); //是否为ajax就靠此句,也是异步的。
            if (data){
                ajax.send(data);
            }else{
                console.log('没有被发送的数据!');
                //ajax.send();
            }
        }
        ajax.onreadystatechange = function(){
            if (ajax.readyState==4 && ajax.status==200){
                weiXinConfig = ajax.responseText;
                success(weiXinConfig);
            }
        }

    }
    //上传
    document.getElementById('btn_uploadProject').onclick = function(){
        //document.getElementById('project_config').submit();
        var path = document.getElementById('path').value;
        var appid = document.getElementById('appid').value;
        var projectname = document.getElementById('projectname').value;
        var version = document.getElementById('version').value;
        var desc = document.getElementById('desc').value;
        var strWeiXinConf = "projectDir="+path.trim()+"&appid="+appid.trim()+"&appid="+appid.trim()+"&projectname="+projectname.trim()+"&version="+version.trim()+"&desc="+desc.trim();
        console.log("这是ajax发送给后端的数据:"+strWeiXinConf);
        ajax_method('http://www.haodage.com/w.php',strWeiXinConf,'post',upload);
    }
    //获取项目配置
    document.getElementById('path').onblur = function(){
        var path = document.getElementById('path').value;
        var strWeiXinConf = "projectDir="+path;
        console.log("这是ajax发送给后端的数据:"+ strWeiXinConf);      
        ajax_method('http://www.haodage.com/w.php',strWeiXinConf,'post',success);
    }
script>

你可能感兴趣的:(Javascript)