ajax简单案例

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))
    	}
    );
}