//ajax
console.log('ajax');

const datas = require('./config.json');


//jquery ajax API

// load(url,data,callback(res,sataus,xhr));

//当调用这个方法时，指定的元素内容将会清空并且加载新的html
//response : 返回 相应的资源数据  
//status: 返回成功或失败 例如： success
//xhr: 返回xmlhttprequest对象

$('div').load('test.html','datas',function(response,status,xhr) {
     console.log(response,status,xhr);
}); 


//get(url,data,callback(),dataType)
//dataType: xml | html | text | script | json | jsnp

//用于get请求获取数据
$.get('test.html',function(data,status) {
    console.log(data,status);
})

// //[Log] 
// <h1>hello word</h1>
//  – "success"

$.getJSON('config.json',function(result) {
    $.each(result,function(i,field) {
        console.log(i+' '+' '+field);
    })
});

$.getScript('jsons.js',function(res) {
        console.log(res);
});


//param(obj,trad)
 //方法创建数组或对象的序列化表示形式
$.param(datas,true);

console.log($.param(datas,true))

//[Log] name=json&version=1.0




//post(url,data,callback,dataType)

//一般用于发送数据
// $.post('config.json',{suggest:datas},function(result) {
//     console.log(result);
// });



//ajaxStart()
$(document).ajaxStart(function() {
    console.log('第一个ajax运行')
})



//ajaxComplete(function(event,xhr,options) {})
//只在请求完成时运行
$(document).ajaxComplete(function() {
    console.log('successfuly')
})



//ajaxError()

$(document).ajaxError(function() {
    console.log('badly');
})

$(document).ajaxSend(function() {
    console.log('即将发送')
})


//ajaxSuccess()
//$.ajaxSuccess();





//serialize() 处理表单序列化

//serializeArray()

//{name: "user", value: "222"}, {name: "pass", value: "111"}] (2)


//button 直接获取form 下的 数据
//$('form').serialize()

//注意 如果在一个react项目中 注意渲染后的组件
//load加载下的资源，如网页，需要在源文件中引入 jq, js 实现 
$('input').on('click',function() {
    alert('')
    var txt = $('[name="user"]').val()+$('[name="pass"]').val();
    console.log($('form').serialize(),txt);
})


//ajax({});

$.ajax({
    async:true,
    type:'post',
    cache:false,
    url:'http://localhost:3000/ajax',
    //返回的数据类型 不一致 也会导致ajax请求 失败
    dataType:'text',
    crossDomain:true,
    //jsonpCallback:"jsonpCallbackFun",
    //jsonp: "callback",
    data:'datas',
    beforeSend:function() {
        $('div').show();
        
        console.log('loading....')
    },
    success:function(res,req,xhr) {
        $('div').hide();
        const resp = '<h1>请求成功'+res+'</h1>';
       

        console.log('success',res,req,xhr)

        xhr.status==200? $('div').html(resp): console.log('');
        $('div').show();
    },
    error:function(err) {
        console.log(err);
    },
    complete:function() {
        //$('div').toggle();
        console.log('complete');
    }

})