AJAX
AJAX请求
AJAX 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML) , 是指一种创建交互式网页应用的网页开发
技术。
ajax 是一种浏览器通过 js 异步发起请求, 局部更新页面的技术。
Ajax 请求的局部更新, 浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容
jQuery使用Ajax请求
流程就是js这边发起ajax请求 ,然后服务器servlet处理后 回传给客户端json,然后js这边又通过回调函数接收数据展示在页面上。
$.ajax 方法
$.ajax 方法
- url 表示请求的地址
- type 表示请求的类型 GET 或 POST 请求
- data 表示发送给服务器的数据
- 格式有两种:
一: name=value&name=value
二: {key:value} - success 请求成功, 响应的回调函数
- dataType 响应的数据类型
常用的数据类型有:
text 表示纯文本
xml 表示 xml 数据
json 表示 json 对象
$("#ajaxBtn").click(function(){
$.ajax({
url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
// data:"action=jQueryAjax",
data:{action:"jQueryAjax"},
type:"GET",
success:function (data) {
// alert("服务器返回的数据是: " + data);
// var jsonObj = JSON.parse(data);
$("#msg").html("编号: " + data.id + " , 姓名: " + data.name);
},
dataType : "json"
});
});
. g e t 方 法 和 .get 方法和 .get方法和.post 方法
就是封装了$.ajax 方法, 少了type参数
- url 请求的 url 地址
- data 发送的数据
- callback 成功的回调函数
- type 返回的数据类型
// ajax--get 请求
$("#getBtn").click(function(){
$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
$("#msg").html(" get 编号: " + data.id + " , 姓名: " + data.name);
},"json");
});
// ajax--post 请求
$("#postBtn").click(function(){
$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data)
{
$("#msg").html(" post 编号: " + data.id + " , 姓名: " + data.name);
$.getJSON 方法
继续封装,少了type返回的数据类型参数
// ajax--getJson 请求
$("#getJSONBtn").click(function(){
$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function
(data) {
$("#msg").html(" getJSON 编号: " + data.id + " , 姓名: " + data.name);
});
});
表单序列化 serialize()
serialize()可以把表单中所有表单项的内容都获取到, 并以 name=value&name=value 的形式进行拼接。
// ajax 请求
$("#submit").click(function(){
// 把参数序列化
$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" +
$("#form01").serialize(),function (data) {
$("#msg").html(" Serialize 编号: " + data.id + " , 姓名: " + data.name);
});
});