jquery_ajax
一、jQuery - AJAX 简介
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
二、jQuery - AJAX的常用方法
1.load() 从服务器加载数据,并把返回的数据放置到指定的元素中
语法
$(selector).load(url,data,function(response,status,xhr))
2.$.ajax() 执行异步 AJAX 请求
定义和用法
ajax() 方法用于执行 AJAX(异步 HTTP)请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
语法
$.ajax({name:value, name:value, … })
3.$.get() 使用 AJAX 的 HTTP GET 请求从服务器加载数据
语法
$.get(URL,data,function(data,status,xhr),dataType)
4.$.post() 使用 AJAX 的 HTTP POST 请求从服务器加载数据
语法
$(selector).post(URL,data,function(data,status,xhr),dataType)
URL
<!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:8585/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>";
//$('<tr></tr>').html(tdstring).appendTo('table');
$(
"table")
.append(
$(
'<tr></tr>')
.html(
tdstring));
});
}
});
});
//测试ajax的get请求
$("#but2").click(
function() {
$.ajax({
url : "http://localhost:8585/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
});
});
//测试ajax的get请求,带参数
$("#but3")
.click(
function() {
//从文本框中得到请求参数
var userid = $("#text1").val();
var urlString = "http://localhost:8585/JqueryAjax/find?userid="
+ userid;
$.ajax({
url : urlString,
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
});
});
//测试ajax的POST请求,不带参数
$("#but4").click(
function() {
$.ajax({
url : "http://localhost:8585/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();
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(){}
});
});
*/
//测试ajax的POST请求,带参数
$("#but5").click(
function() {
//从文本框中得到请求参数
var userid = $("#text1").val();
$.ajax({
url : "http://localhost:8080/JqueryAjax/find",
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() {
}
});
});
//测试jquery的get方法
$("#but6").click(
function() {
$.get("http://localhost:8585/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方法,带参数
$("#but6").click(
function() {
//从文本框中得到请求参数
var userid = $("#text1").val();
$.get("http://localhost:8585/JqueryAjax/find?userid="
+ userid, 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方法
$("#but7").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方法,带参数
$("#but7").click(
function() {
var userid = $("#text1").val();
$.post("http://localhost:8585/JqueryAjax/find?userid="
+ userid, 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" /> <input id="but3"
type="button" value="测试ajax-get带参数" /><br> <input id="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="but6" type="button" value="测试get" /> <input id="but7"
type="button" value="测试post" />
<table id="main2" border="1px" width="500px"></table>
</center>
</body>
</html>
执行结果: