今天完成的事情：今天学习了jQ的AJAX的部分
明天计划的事情：继续后续AngularJS部分的学习
遇到的问题：实际操作不够还是需要更多的练习
收获：AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#div1").load("/gzd/demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1">
<h2>使用 jQuery AJAX 修改文本内容</h2>
</div>
<button>获取外部内容</button>
</body>
</html>
运行结果
点击
也可以把 jQuery 选择器添加到 URL 参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#div1").load("/try/ajax/demo_test.txt #p1");
});
});
</script>
</head>
<body>
<div id="div1">
<h2>使用 jQuery AJAX 修改文本</h2>
</div>
<button>获取外部文本</button>
</body>
</html>
运行结果
点击
"demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素里面
加上提示框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#div1").load("/try/ajax/demo_test.txt", function (responseTxt, statusTxt, xhr) {
if (statusTxt == "success")
alert("外部内容加载成功!");
if (statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div1">
<h2>使用 jQuery AJAX 修改该文本</h2>
</div>
<button>获取外部内容</button>
</body>
</html>
运行结果
加载失败
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
HTTP 请求：GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$.get("/try/ajax/demo_test.php", function (data, status) {
alert("数据: " + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP GET 请求并获取返回结果</button>
</body>
</html>
运行结果
点击
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$.post("/try/ajax/demo_test_post.php", {
name: "baidu",
url: "http://www.baidu.com"
},
function (data, status) {
alert("数据: \n" + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP POST 请求页面并获取返回内容</button>
</body>
</html>
运行结果
点击
明天看一下关于AngularJS的内容
返回列表
评论