jQuery - AJAX 简介
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
jQuery - AJAX的常用方法
load() 从服务器加载数据，并把返回的数据放置到指定的元素中
语法
$(selector).load(url,data,function(response,status,xhr))
$.ajax() 执行异步 AJAX 请求
定义和用法
ajax() 方法用于执行 AJAX（异步 HTTP）请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
语法
$.ajax({name:value, name:value, … })
error(xhr,status,error) 如果请求失败要运行的函数。
$.get() 使用 AJAX 的 HTTP GET 请求从服务器加载数据
语法
$.get(URL,data,function(data,status,xhr),dataType)
$.post() 使用 AJAX 的 HTTP POST 请求从服务器加载数据
语法
$(selector).post(URL,data,function(data,status,xhr),dataType)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery ajax</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">$(function() {
//测试load$("#but1").click(function() {
$("#div1").load("http://localhost:8080/JqueryAjax/main",function(resp, status) {
if (status == "success") {
$("div").html("<table border='1px' width='500px'></table>");//将得到的json字符串转换成json对象var jsonobj = eval("("+ resp + ")");$(jsonobj).each(function(index,element) {
var tdstring = "<td>"+ element.userid+ "</td><td>"+ element.username+ "</td><td>"+ element.userage+ "</td><td>"+ element.useraddress+ "</td>";$("table").append($('<tr></tr>').html(tdstring));});}});});//测试ajax的get请求，不带参数$("#but2").click(function() {
$.ajax({
url : "http://localhost:8080/JqueryAjax/main",type : "GET",dataType : "json",success : function(resp, status) {
$("#main1").empty();$(resp).each(function(index, element) {
var trstring = "<tr><td>"+ element.userid + "</td><td>"+ element.username+ "</td><td>" + element.userage+ "</td><td>"+ element.useraddress+ "</td></tr>";$("#main1").append(trstring);});},async : true,error : function() {
}});});//测试ajax的get请求，带参数$("#but3").click(function() {
//从文本框中得到请求参数var userid = $("#text1").val();var urlString = "http://localhost:8080/JqueryAjax/findOne?userid="+ userid;$.ajax({
url : urlString,type : "GET",dataType : "json",success : function(resp, status) {
$("#main1").empty();$(resp).each(function(index, element) {
var trstring = "<tr><td>"+ element.userid+ "</td><td>"+ element.username+ "</td><td>"+ element.userage+ "</td><td>"+ element.useraddress+ "</td></tr>";$("#main1").append(trstring);});},async : true,error : function() {
}});});//测试ajax的POST请求,不带参数$("#but4").click(function() {
$.ajax({
url : "http://localhost:8080/JqueryAjax/main",type : "POST",dataType : "json",success : function(resp, status) {
$("#main1").empty();$(resp).each(function(index, element) {
var trstring = "<tr><td>"+ element.userid + "</td><td>"+ element.username+ "</td><td>" + element.userage+ "</td><td>"+ element.useraddress+ "</td></tr>";$("#main1").append(trstring);});},async : true,error : function() {
}});});/*//测试ajax的POST请求,带参数$("but5").click(function(){//从文本框中得到参数var userid=$("#text1").val();$.ajax({url:"http://localhost:8080/JqueryAjax/findOne", type:"POST",data:{userid:userid},dataType:"json",success:function(resp,status){$("#main1").empty();$(resp).each(function(index,element){var trstring="<tr><td>"+element.userid+"</td><td>"+element.username+"</td><td>"+element.userage+"</td><td>"+element.useraddress+"</td></tr>";$("#main1").append(trstring);});},async:true,error:function(){}});});*///测试ajax的POST请求，带参数$("#but5").click(function() {
//从文本框中得到请求参数var userid = $("#text1").val();var urlString = "http://localhost:8080/JqueryAjax/findOne?userid="+ userid;$.ajax({
url : urlString,type : "POST",dataType : "json",success : function(resp, status) {
$("#main1").empty();$(resp).each(function(index, element) {
var trstring = "<tr><td>"+ element.userid+ "</td><td>"+ element.username+ "</td><td>"+ element.userage+ "</td><td>"+ element.useraddress+ "</td></tr>";$("#main1").append(trstring);});},async : true,error : function() {
}});});//测试jquery的get方法$("#but6").click(function() {
$.get("http://localhost:8080/JqueryAjax/main", function(resp, status) {
$("#main2").empty();$(resp).each(function(index, element) {
var trstring = "<tr><td>" + element.userid+ "</td><td>" + element.username+ "</td><td>" + element.userage+ "</td><td>" + element.useraddress+ "</td></tr>";$("#main2").append(trstring);});}, "json");});//测试jquery的get方法带参数//从文本框中得到参数$("#but7").click(function() {
var userid = $("#text2").val();var urlString = "http://localhost:8080/JqueryAjax/findOne?userid="+ userid;$.get(urlString, function(resp, status) {
$("#main1").empty();$(resp).each(function(index, element) {
var trstring = "<tr><td>"+ element.userid+ "</td><td>"+ element.username+ "</td><td>"+ element.userage+ "</td><td>"+ element.useraddress+ "</td></tr>";$("#main1").append(trstring);});}, "json");});//测试jquery的post方法$("#but8").click(function() {
$.post("http://localhost:8080/JqueryAjax/main", function(resp, status) {
$("#main2").empty();$(resp).each(function(index, element) {
var trstring = "<tr><td>" + element.userid+ "</td><td>" + element.username+ "</td><td>" + element.userage+ "</td><td>" + element.useraddress+ "</td></tr>";$("#main2").append(trstring);});}, "json");});//测试jquery的post有参数方法$("#but9").click(function() {
var userid = $("#text2").val();var urlString = "http://localhost:8080/JqueryAjax/findOne?userid="+ userid;$.post(urlString, function(resp, status) {
$("#main2").empty();$(resp).each(function(index, element) {
var trstring = "<tr><td>"+ element.userid+ "</td><td>"+ element.username+ "</td><td>"+ element.userage+ "</td><td>"+ element.useraddress+ "</td></tr>";$("#main2").append(trstring);});}, "json");});});
</script>
</head>
<body><center><input id="but1" type="button" value="测试load" /><div id="div1"></div><hr><input id="but2" type="button" value="测试ajax-get不带参数" /><br> <inputid="but3" type="button" value="测试ajax-get带参数" /><br> <inputid="text1" type="text" /><br> <input id="but4" type="button"value="测试ajax-post" /> <input id="but5" type="button"value="测试ajax-post带参数" /><table id="main1" border="1px" width="500px"></table><hr><input id="text2" type="text" /><br> <input id="but6"type="button" value="测试get" /> <input id="but7" type="button"value="测试get带参数" /> <input id="but8" type="button" value="测试post" /><input id="but9" type="button" value="测试post带参数" /><table id="main2" border="1px" width="500px"></table></center></center></body>
</html>
运行结果
