JQuery中AJAX的使用

---

一、$.ajax函数

语法：

jQuery.ajax([settings])

参数	描述
settings	可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值。

• contentType类型：String默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。默认值适合大多数情况。
• data类型：String发送到服务器的数据。将自动转换为请求字符串格式。
• dataType类型：String预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。（因为将使用 DOM 的 script标签来加载）“json”: 返回 JSON 数据 。“text”: 返回纯文本字符串
• error类型：Function默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
• success类型：Function请求成功后的回调函数。参数：由服务器返回
• type类型：String默认值: “GET”)。请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
• url类型：String默认值: 当前页地址。发送请求的地址。

模板

$.ajax({
	url：请求地址
	type:"get | post | put | delete "  //默认是get,
	data:请求参数 {"id":"123","pwd":"123456"},
	dataType:请求数据类型"html | text | json | xml | script | jsonp ",
	success:function(data,dataTextStatus,jqxhr){ 
		//请求成功时
	},
	error:function(jqxhr,textStatus,error){
		//请求失败时
	}
})

$.ajax函数的使用

$.ajax({
    type:"POST",
    url:"/day_web_Filter/LoginServlet.do",
    async:true,
    data:"username="+username+"&password="+password,
    // 响应的数据类型
    dataType:"text",
    // 发生错误时执行的回调函数
    error:function (){
        alert("系统错误");
    },
    // 成功时执行的回调函数
    success:function (data){
        $("#msg").html(data);
        $("#msg").css("color","red");
    }
})

二、$.get函数

语法：

$(selector).get(url,data,success(response,status,xhr),dataType)

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数： response： 包含来自请求的结果数据 status：包含请求的状态 ------- xhr： 包含 XMLHttpRequest 对象
dataType	可选。规定预计的服务器响应的数据类型。默认地，jQuery 将智能判断。可能的类型：（“xml”，“html”，“text”，“script”，“json”，“jsonp”）

$.get函数的数据：

1. 可以放在url地址上
2. 放在data里

$.get函数的使用

1.数据放在 url 地址上

$.get({
    url:"/day_web_Filter/LoginServlet.do?username="+username+"&password="+password,
    dataType:"text",
    success:function (data){
        $("#msg").html(data);
        $("#msg").css("color","red");
    }
})

2.数据放在 data 里

$.get({
    url:"/day_web_Filter/LoginServlet.do?",
    data:"username="+username+"&password="+password,
    dataType:"text",
    success:function (data){
        $("#msg").html(data);
        $("#msg").css("color","red");
    }
})

三、$.post函数

语法：

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

参数	描述
url	必需。规定把请求发送到哪个 URL。
data	可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)	可选。请求成功时执行的回调函数。
dataType	可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）

$.post函数的使用

$.post({
    url:"/day_web_Filter/LoginServlet.do",
    data:"username="+username+"&password="+password,
    dataType:"text",
    success:function (data){
        $("#msg").html(data);
        $("#msg").css("color","red");
    }
})

---