jQuery之ajax传输json数据

jQuery和AJAX简介

jQuery 是一个 JavaScript 库, 极大地简化了 JavaScript 编程.
AJAX(Asynchronous JavaScript and XML, 即异步的 JavaScript 和 XML), 是一种与服务器交换数据的技术, 其最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容.

jQuery 的 ajax() 方法

这里只介绍 jQuery 的 ajax() 方法, 更多请参考 Ajax | jQuery API Documentation

定义和用法

ajax() 方法用于执行 AJAX(异步 HTTP)请求.
所有的 jQuery AJAX 方法都使用 ajax() 方法. 该方法通常用于其他方法不能完成的请求.

使用 AJAX 请求改变 id = text_display 元素的文本实例:

$("#btn_ajax").click(function () {
    var requestJsonData = {
        "text": "hello"
    }
    $.ajax({
        url: AJAX_URL,
        method: 'POST',
        dataType: 'json',
        data: JSON.stringify(requestJsonData),
        success: function (result, status) {
            $('#text_display').text(data.text)
        }
    });
});

$.ajax( url [, settings ])

url: String类型, 发送请求的 URL.
settings: 一系列关于该请求的详细设置, 下面会介绍几个常用的设置.

名称	数据类型	默认值	描述
async	bool	true	请求是否异步处理.
beforeSend(xhr)	Function()	null	发送请求前允许的函数.
headers	PlainObject	{}	向请求中添加的header.
type / method	String	‘GET’	请求的类型, jQuery 1.9.0版本之前只能用type.
dataType	String	智能分辨	你想从服务端获取的数据类型, 可选类型有 xml, json, script, html, text等.
data	PlainObject / String / Array	‘’	要发送的数据, 必须为成对的数据.
success	Function(data, status, jqXHR)	null	发送成功后运行的程序, data为返回的数据, status为状态码.
error	Function(jqXHR, status, errorThrown )	null	发送失败后运行的程序.
timeout	int	本地浏览器设置	设置本地的请求超时时间(以毫秒计, 为0时代表无)

跨域请求问题

相同的域必须满足以下几点:

协议相同(如http);
端口相同(如80);
域名相同(如www.example.com).

跨域就指着协议, 端口, 域名不一致, 出于安全考虑, 跨域的资源之间是无法交互的(例如一般情况跨域的JavaScript无法交互).

在服务器端返回的数据中添加 header Access-Control-Allow-Origin: *, 即表示服务器同意任意跨源请求.
详细可以参考 跨域资源共享 CORS 详解 - 阮一峰的网络日志

jQuery和AJAX简介

jQuery 的 ajax() 方法

定义和用法

跨域请求问题

参考文献