文章目录
jQuery - AJAX 简介
javascript AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。
什么是 AJAX?
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
使用 AJAX 的应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。
关于 jQuery 与 AJAX jQuery 提供多个与 AJAX 有关的方法。
- 通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或
- JSON 同时您能够把这些外部数据直接载入网页的被选元素中。
jQuery - AJAX load() 方法
JQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
<h2>jQuery AJAX 是个非常棒的功能!</h2>
<p id="p1">这是段落的一些文本。</p>
下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中:
<!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(){
$("#div1").load("/try/ajax/demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>
</body>
</html>
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
responseTxt - 包含调用成功时的结果内容 statusTXT - 包含调用的状态 xhr - 包含 XMLHttpRequest
对象
下面的例子会在 load() 方法完成后显示一个提示框。 如果 load()
方法已成功,则显示"外部内容加载成功!",而如果失败,则显示错误消息:
<!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 - AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
HTTP 请求:GET vs. POST 两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。
GET: 从指定的资源请求数据 POST - 向指定的资源提交要处理的数据 GET 基本上用于从服务器获得(取回)数据。注释:GET方法可能返回缓存数据。
POST: 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法:
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
- 可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.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>
$.get() 的第一个参数是我们希望请求的 URL(“demo_test.php”)。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容,第二个回调参数存有请求的状态。
提示: 这个 PHP 文件 (“demo_test.php”) 类似这样:
<?php
echo '这是个从PHP文件中读取的数据。';
?>
jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.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:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP POST 请求页面并获取返回内容</button>
</body>
</html>
$.post() 的第一个参数是我们希望请求的 URL (“demo_test_post.php”)。
然后我们连同请求(name 和 url)一起发送数据。
“demo_test_post.php” 中的 PHP 脚本读取这些参数,对它们进行处理,然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态。
提示: 这个 PHP 文件 (“demo_test_post.php”) 类似这样:
<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$url;
?>
Ajax 鼠标离开搜索框就弹出消息(失去焦点)
<html>
<head>
<title>首页</title>
</head>
<body>
用户名:<input type="text" id="txtName" onblur="a1()"/>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script>
function a1(){
$.post({
url:"${pageContext.request.contextPath}/ajax1",
data:{'name':$("#txtName").val()},
success:function (data,status) {
alert(data);
alert(status);
}
});
}
</script>
</body>
</html>
- 引入jQuery,这我用的是地址,没有下载
- ajax默认的是get方法,所以这里我用了显示的post方法
Ajax 数据库回传动态刷新数据
<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tbody id="content">
</tbody>
</table>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
$("#btn").click(function () {
$.post("${pageContext.request.contextPath}/ajax2",function (data) {
var html="";
for (var i = 0; i <data.length ; i++) {
html+= "<tr>" +
"<td>" + data[i].name + "</td>" +
"<td>" + data[i].age + "</td>" +
"<td>" + data[i].sex + "</td>" +
"</tr>"
}
$("#content").html(html);
});
})
})
</script>
- 只贴了body的内容
- 表格table之定下了头部,内容都交给tbody,读取数据库的信息
- 引入jQuery
- post参数直接写了,没有写出url等
- 定义一个html,用来接收数据库的信息后传给tbody
- 遍历数据库的数据,格式是html <tr> <td>数据库数据.具体哪个key</td> <td>数据库数据.具体哪个key</td> <td>数据库数据.具体哪个key</td> … </tr>
- 使用 $("#content").html(html)将html赋给tbody
Ajax 数据库回传动态提示用户名是否错误
<p>
用户名:<input type="text" id="name" onblur="a1()"/>
<span id="userinfo"></span>
</p>
<p>
密码:<input type="text" id="psw" onblur="a2()"/>
<span id="pswinfo"></span>
</p>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script>
function a1() {
$.ajax({
url: "${pageContext.request.contextPath}/ajax3",
data: {'username': $("#name").val()},
success: function (data) {
if (data.toString() == "用户名正确") {
$("#userinfo").css("color", "greed")
} else {
$("#userinfo").css("color", "red")
}
$("#userinfo").html(data);
}
});
}
function a2() {
$.ajax({
url: "${pageContext.request.contextPath}/ajax3",
data: {'pwd': $("#psw").val()},
success: function (data) {
if (data.toString() == "用户名正确") {
$("#pswinfo").css("color", "greed")
} else {
$("#pswinfo").css("color", "red")
}
$("#pswinfo").html(data);
}
});
}
</script>
只写了两个表单,用户名和密码,并且都设置了失去焦点触发函数
在两个表单后面加了span标签,用来等下显示消息用户名错误
直接写了ajax,默认就是get方法
url,data,success
拿到数据库传回来的数据,if判断一下设置一下颜色.加if就是好看一点
$("#xx").html(data);将数据库传过来的消息输出到span中(用户名密码是否正确是数据库判断的)