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'; // 要请求的接口URL var 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)) } ); }