万户网站高端网站制作

jquery 自带的 $.ajax() 函数简单案例

// 自定义构造一个特定的函数用来通用请求
function http(url, data, method, success, fail) {// 三元运算符判断method为get or post，post数据需要JSON.stringify()来格式化后再提交给后台data = method === 'GET' ? data : JSON.stringify(data);$.ajax({url = url,method = method,dataType = 'json',contentType = 'application/json; charset=UTF-8',data = data,  //这行不能省略，如果没有数据向后台提交也要写成data:{}的形式success = success,error = fail});
}

调用http函数来请求接口并获取数据
1.数据格式:

{'status': 0,'message': "ok",'data': [{"name": "python", "price": 10000},{"name": "java", "price": 11000},{"name": "automatic", "price": 8600}]
}

2.js-jquery

$(function () {// get请求$('get_button').click(get_url)// post 请求$('post_botton').click(post_url)
});
function get_url() {var url = 'http://xxxxxxxxxxxxxx'; // 要请求的接口URLvar send_data = {};  // //这行不能省略，如果没有数据向后台提交也要写成data:{}的形式http(url, send_data, 'GET', function(data) {alert(JSON.stringify(data)); // 弹窗显示从接口获取到的数据for (var i i=0; i<data['data'].length; i++) {console.log(data['data'][i]); // 打印在控制台显示获取到的数据$('#course').append('<div><label>' + data["data"][i]["name"] + '</label><label>' + data["data"][i]["price"] + '</label></div>')}},function(data){alert(JSON.stringify(data)) // 获取直接alert('error')});
}function post_url() {var url = "http://xxxxxxxxx";var data = {};http(url, data, 'POST', function (data) {alert(data['data'])}, function (data) {alert(JSON.stringify(data))});
}