文章目录
前言
提示：HTML/CSS/JS/数据，对于网页而已是什么？
HTML —— 网页的 骨架
CSS —— 网页的 颜值
JavaScript—— 网页的 行为
数据—— 网页的 灵魂
一、客户端获取资源的过程
资源包括：文件、音乐、图片，以及网页所能看见的各种数据。，资源的获取方式分三步走：
- 客户端（用户电脑）发起请求；
- Web服务器处理客户端发来的请求；
- Web服务器将资源响应给客户端。
二、资源请求方式
2.1.get请求（拿）
根据URL地址，从服务器去获取HTML文件等。
2.2.post请求（发）
往服务器发送资源，例如：登录时向服务器提交登录信息等。
三、Ajax
3.1. 作用
Ajax实现网页和服务器之间的数据交互。
3.2. 常用场景
3.2.1. 动态加载搜索提示列表
3.2.2 数据分页显示，根据页码值动态变化内容
3.2.3 数据的增删改查，通过Ajax实现数据交互
四、jQuery发起Ajax请求
4.1 方法有三个
1. $.get() //获取数据
2. $.post() //提交数据
3. $.ajax() //既可获取，又可提交
4.2 $.get()函数语法
作用： 专门用于get请求，从而将服务器上的资源请求到客户端来使用。
$.get(url, [data], [callback])
/*
** url: 要请求的资源地址
** data: 请求期间要携带的参数
** callback: 请求成功的回调函数
*/
Get请求例子1：通过$.get()方法从控制器中获取数据
//通过$.get()方法从控制器中获取数据
$("#btnGetData1").click(function () {
//$.get(url,callback)
//function (data) function() 回调函数 data 参数
$.get("/Ajax/...", function (data) {
//data 控制器中PersonData方法返回的一个json格式的字符串
console.log(data);
//JSON.parse(json格式的字符串) 转换为js对象
data = JSON.parse(data);
//val()是一个方法 value是一个属性
$("#txtName").val(data.name);
$("#cboSex").val(data.sex);
$("#txtAddress").val(data.address);
}); //在这加json可以把字符串转换为对象 }，“json”）；
});
Get请求例子2：通过$.get()方法将试图中的form表单数据提交到控制器的方法中
//btnGetData2 是button的id
$("#btnGetData2").click(function () {
var txtName = $("#txtName").val();
var cboSex = $("#cboSex").val();
var txtAddress = $("#txtAddress").val();
$.get("/Ajax/...", {
name: txtName,
sex: cboSex,
address: txtAddress
}, function (msg) {
alert(msg);
});
});
4.3 $.get()发起不带参数的请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>get不带参数</title>
<script src="./node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
<button id="btnGET">发起get不带参数请求</button>
<script>
$(function(){
$('#btnGET').on('click',function(){
$.get('http://www.baidu.com/',function(res){
//res是服务器从url中返回的数据
console.log(res)
})
})
})
</script>
</body>
</html>
小插曲：jQuery的下载
- 使用npm安装下载jQuery
npm install jquery- 静态页面中引用
若终端没看到提示错误即下载成功，下载后去到
node_modules\jquery\dist路径下找到jQuery
4.4 $.get()发起带参数的请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>get带参数</title>
<script src="./node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
<button id="btnGET">发起get带参数请求</button>
<script>
$(function(){
$('#btnGET').on('click',function(){
$.get('http://www.baidu.com/',{
id:1},function(res){
console.log(res)
})
})
})
</script>
</body>
</html>
4.5 $.post()函数语法
功能单一，专门用于发起post请求，从而向服务器提交数据。
$.post(url, [data], [callback])
/*
** url: 要提交的地址
** data: 要提交的参数
** callback: 提交成功的回调函数
*/
Post请求例子：
//拿到数据后回显在这里
<div id="test"></div>
//Ajax部分
$(document).ready(function() {
$.ajax({
url : "admin/get_online_ganbu.php",//后台请求的数据，用的是PHP
dataTyPE : "json",//数据格式
type : "post",//请求方式
async : false,//是否异步请求
success : function(data) {
//如果请求成功，返回数据。
VAR html = "";
for(var i=0;i<data.length;i++){
//遍历data数组
var ls = data[i];
html +="<span>测试："+ls.name+"</span>";
}
$("#test").html(html); //在html页面id=test的标签里显示html内容
},
})
})
4.6 $.ajax()函数语法
功能综合的函数，它允许我们对Ajax请求进行更详细的配置。
$.ajax({
type: '', // 请求方式，get/post
url:'', //请求地址
data:{
}, //该请求要携带的数据
success:function(res){
} //请求成功之后的回调函数
})