在编程的大道上,Jquery Ajax操作是必不可少的。通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
一、 JQuery中的Ajax操作有:
底层方法
$selector.load(..) 了解即可
$.ajax(..);
简化方法
$.get(..);
$.post(..);
$.getScript(..);
$.getJSON(..);
我们就选择几个比较常用的来说说吧.....
1.$.selector.load(..):
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
load(URL,data.callback)中的三个参数:
参数1:必选的,URL参数为你希望加载的URL。
参数2:可选的,data参数规定与请求一同发送的查询字符串键/值对集合。
参数3:可选的,callback参数是load()方法完成后所执行的函数名称。
2.$.get():
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法:
$.get(url,callback)
其参数1:必选的,url参数为你希望加载的url。
参数2:可选的,请求完成后所执行的函数名。
3.$.post():
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法:
$.post(URL,data,callback);
参数2:可选的,data参数规定连同请求发送的数据。
参数3:callback参数是请求成功后所执行的函数名。
$.get()与$.post()的区别:
$.get()发送请求后悔在地址栏中显示你所输入的用户名和密码,不能保证用户信息的安全性,当涉及到用户隐秘的
信息我们不会用$.get();而$.post()发送请求后在地址栏中不会显示用户名和密码,对于用户的信息保密性比较好,
一般会选用$.post()方法。
二、事件委托:
$selector.live(...) 支持未来元素~ 但是JQ在1.8版本以后废弃了!
$selector.delegate(...) 支持未来元素,是一个过渡方法,不建议使用了
$selector.on(...) 不支持/支持未来元素,常规方式,也是官网推荐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.2.4.js"></script>
<script>
$.ajax({
url:"url",// 请求地址
type:"get",
data:{// 传递参数
username:"admin",
password:"123123"
},
dataType:"json",
error:function() {/*请求失败时的操作*/
// 系统超时等错误提示
},
success:function(data){/*请求成功时的回调函数*/
// dom操作,处理数据
}
})
$.get(
"url",
{username:"admin", password:"123"},
function(data){
}
);
$.post(
"url",
{username:"admin", password:"123"},
function(data){
}
);
</script>
</head>
<body>
<ul id="classType">
<li>原来页面上就有的元素</li>
</ul>
<script>
$(function() {
$.get("http://datainfo.duapp.com/shopdata/getclass.php",function(data){
var _jsonArr = JSON.parse(data);
$.each(_jsonArr, function(index, value) {
var $li = $("<li>").addClass("active");
$li.text(value.className);
$("#classType").append($li);
});
})
/*$.post("url", function(data){
// TODO data
});*/
});
$("#classType").on("click", "li", function() { //用on()方法添加时间委托
alert("事件委托的方式,支持未来元素");
})
</script>
</body>
</html>