記事のディレクトリ
1. Ajaxの技術は何ですか
- AJAX =非同期JavaScriptとXML（非同期JavaScriptとXML）。
- アヤックスは、ページのWebページ全体の技術的な部分をリロードすることなく更新することができます。
- アヤックスは、新しいプログラミング言語が、より速く、よりインタラクティブなWebアプリケーションを、より良い作成するための技術ではありません。
- （AJAXテクノロジーのWebページなし、である）従来のWebページには、あなたはページ全体をリロードする必要があり、更新するか、フォームを送信します。
- 技術を使用してAjaxのWebページ、バックグラウンドでデータ交換サーバの少量で、あなたは非同期部分更新を実現することができます。
アヤックスの使用は行うことができます。
- 登録すると、ユーザー名が自動的にユーザーが既に存在するかどうかを検出する入力します。
- ログインには、ユーザー名とパスワードエラーを求められた場合
- 削除データ行、行ID背景に送信されます、データベースを削除する背景には、データベースは、DOM内のデータのページ行を削除し、正常に削除されます。
以下のように...
2. Ajaxの偽造
あなたは、フロントを使用することができますiframeタグAJAXの外観を偽造するために
、1新しいプロジェクトを作成し、ビルドWebモジュールに
2、IFRAMEを使用して書き込みテストAJAX-frame.html、感情効果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>zz</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
let myDate = new Date();
document.getElementById('currentTime').innerText = myDate.getTime();
};
function LoadPage(){
let targetUrl = document.getElementById('url').value;
console.log(targetUrl);
document.getElementById("iframePosition").src = targetUrl;
}
</script>
<div>
<p>请输入要加载的地址：<span id="currentTime"></span></p>
<p>
<input id="url" type="text" value="https://www.pku.edu.cn/"/>
<input type="button" value="提交" onclick="LoadPage()">
</p>
</div>
<div>
<h3>加载页面位置：</h3>
<iframe id="iframePosition" style="width: 50%;height: 300px;"></iframe>
</div>
</body>
</html>
3、Tomcat設定試験を
見ることができる、唯一の部分負荷ページロケーションエリア更新ページ、及び不変の残りの領域。
3.アヤックス関連のテスト
次の二つは、Ajaxを実現することができます
- jQueryの：より多く持ちます
- axios：VUEはaxiosをお勧めします
本明細書で使用される場合、jqueryの
1.（マウス葉入力フィールド）フォーカスを失った要求AJAXをトリガ
ページajax01.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<html>
<head>
<title>Title</title>
<!--注意：script标签不要自闭合-->
<script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
百度：<input type="text" id="baidu" onblur="baidu()">
<script>
function baidu() {
// 失去焦点触发一个ajax请求
alert("ajax请求")
}
</script>
</body>
</html>
テストの
入力ボックスをクリックし、入力ボックスから離れて移動するマウスがフォーカスを失いました
2.表示テストが成功し、フォーカストリガーにOKバック返すようにAJAXリクエストを失います
コントロールクラスAjaxController
package com.zz.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class AjaxController {
@RequestMapping("/a2")
public String ajax(String name){
System.out.println(name);
return "ok";
}
}
ページajax02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
百度：<input type="text" name="name" id="baidu" onblur="baidu()">
<script>
function baidu(){
// 失去焦点触发一个ajax请求
$.post({
url:'/a2',
data:{name:$("#baidu").val()},
//成功的回调函数
success:function (data,status) {
console.log(data)
console.log(status)
}
});
}
</script>
</body>
</html>
テスト
3.フォーカストリガーに背景オブジェクトのコレクションを返すために、AJAXリクエストを失います
コントロールクラスAjaxController
@RequestMapping("/aj2")
public List<User> ajax2(String name){
User user1 = new User("铁牛1", 18, "女");
User user2 = new User("铁牛2", 18, "男");
User user3 = new User("铁牛3", 18, "女");
User user4 = new User("铁牛4", 18, "男");
User user5 = new User("铁牛5", 18, "女");
User user6 = new User("铁牛6", 18, "男");
List<User> users = Arrays.asList(user1, user2, user3, user4, user5, user6);
return users;
}
同時に、アドレスの変更/ AJ2 ajax02.htmlページ
テスト
前記トリガイベントは、データは、フロントエンドインターフェースにエコーされます
ページajax03.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<input type="button" id="btn" value="点击"/>
<table width="70%" border="1px" align="center">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tbody id="content">
<!--应该从后台自动刷新数据过来-->
</tbody>
</table>
<script>
$('#btn').click(function(){
//post(url,data,success的回调函数)
$.post("/aj2",function (data){
console.log(data);
//基本的dom操作
let html="";
for (let 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>
</html>
テスト
