SpringMVC ------アヤックス

AJAX =非同期JavaScriptとXML（非同期JavaScriptとXML）。
AJAXは、ページをリロードすることなく、本当にページの技術の一部を更新できることをしていています。

アヤックスは、新しい言語ではありませんが、それは、より良い、より速く、よりインタラクティブなWebアプリケーション技術を作成するために使用されてきました。

2005年には、Google経由GoogleはAJAXが人気となった提案します。

：GoogleはAJAXは非常に動的なWebページを作成するために使用する提案
は、Googleの検索ボックスにキーワードを入力すると、JavaScripがサーバにこれらの文字を入れ、その後、検索候補のリストを返しますサービスにアクセスしてください。
Baiduの検索ボックスのように：

従来のWebページ（つまり、Ajax技術のWebページなし、である）、フォームを更新または提出したい、あなたはページ全体をリロードする必要があります。
技術を使用してAjaxのWebページには、バックグラウンドでデータ交換サーバの少量で、あなたは非同期部分更新を実現することができます。

あなたが行うことができますAJAXを使用してください：
登録時に、ユーザー名が自動的にユーザーが既に存在するかどうかを検出する入力します。
着陸すると、ユーザー名パスワードエラー示唆
データ行を削除し、行IDが背景に送信されます、データベースを削除する背景には、データベースには、DOM内のデータのページ行を削除し、正常に削除されます。

私たちは、AJAXの偽の見た目の前にラベルを使用することができます。iframeタグ

<％@ページのcontentType = "text / htmlの;のcharset = UTF-8"言語= "javaの" ％>
<HEAD>
<TITLE>アヤックス</ TITLE>
<スクリプトSRC = "$ {pageContext.request.contextPath} /静力学/jsp/jquery-3.4.1.js "> </ SCRIPT>
<SCRIPT>

/ *
JQuery.post（...）
全てのパラメータ：
URL：ページアドレスのURLをロードする（必要な）
データ：のキー/値のパラメータを送信する
ロードするときに成功コールバック関数：成功を
返すためにデータ要求：データの
ステータスを：リクエストのステータスが返されます
* /
関数A1を（）{
//デフォルトのAjaxリクエストの取得
の$ .post（{
URL： "$ {} pageContext.request.contextPath /アヤックス/ A1"、
データ：{ '名前' $を（ " #txtName「）ヴァル（）} ,.
成功：機能（データ、ステータス）{
にconsole.log（データ）
はconsole.log（ステータス）;
}
}）;
}

</ SCRIPT>
</ head>
<body>
<％ -のonblur：フォーカストリガイベントを失う- ％>
ユーザ名：<タイプの入力が= "テキスト"上記ID = "txtName"のonblur = "A1を（）" />
< /ボディ>
---------------------
著者：のjava-探検
ソース：CSDN
元ます。https：//blog.csdn.net/weixin_44821177/article/details/ 98465253
著作権：この記事はブロガーのオリジナルの記事、再現され、ボーエンのリンクを添付してください！

そして、私たちのcontorllerを記述します。

パッケージcom.wu.controller。

輸入org.springframework.stereotype.Controller。
輸入org.springframework.web.bind.annotation.RequestMapping。

インポートのjavax.servlet.http.HttpServletResponse; 
インポートにjava.io.IOException; 

@Controller 
@RequestMapping（" / AJAX " ）
 のパブリック クラスAjaxController {
 // 第一种方式、服务器要返回一个字符串、直接使用応答 
@RequestMapping（" / A1 " ）
 公共 ボイドアヤックス（文字列名、HttpServletResponseの応答）スローIOExceptionが{
 場合（" 管理者"  .equals（名））{
response.getWriter（）。印刷（"真" ）; 
} 他{ 
response.getWriter（）プリント（" 偽" ）; 
} 
} 
}

結果：

入力ボックスの外側のマウスクリックイベントをトリガするとき、入力ボックスをクリックして下さい：示さ偽成功

オリジナルのアップグレードに基づいて：

 1 @RequestMapping("/a3")
 2 @ResponseBody
 3 public String ajax3(String name,String pwd){
 4 String msg = "";
 5 if (name!=null){
 6 if ("admin".equals(name)){
 7 msg = "ok";
 8 }else {
 9 msg = "用户名有误";
10 }
11 }
12 if (pwd!=null){
13 if ("123456".equals(pwd)){
14 msg = "ok";
15 }else {
16 msg = "密码输入有误";
17 }
18 }
19 return msg;
20 }
21 1
22 
23 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
24 <html>
25 <head>
26 <title>Title</title>
27 <script src="${pageContext.request.contextPath}/statics/jsp/jquery-3.4.1.js"></script>
28 
29 <script>
30 function a1() {
31 $.post({
32 url:"${pageContext.request.contextPath}/ajax/a3",
33 data:{"name":$("#name").val()},
34 success: function (data) {
35 if (data.toString()=='ok') { //信息核对成功
36 $('#userInfo').css("color","green");
37 }else {
38 $('#userInfo').css("color","red");
39 }
40 $("#userInfo").html(data);
41 }
42 })
43 
44 }
45 function a2() {
46 $.post("${pageContext.request.contextPath}/ajax/a3",{"pwd":$("#pwd").val()},function (data) {
47 if (data.toString()=='ok') { //信息核对成功
48 $('#pwdInfo').css("color","green");
49 }else {
50 $('#pwdInfo').css("color","red");
51 }
52 $("#pwdInfo").html(data);
53 })
54 }
55 </script>
56 
57 </head>
58 <body>
59 </html>

运行结果“：”

输入正确的用户名和密码：

nice大功告成动态请求响应局部刷新就是如此。。。
---------------------
作者：java—explore
来源：CSDN
原文：https://blog.csdn.net/weixin_44821177/article/details/98465253
版权声明：本文为博主原创文章，转载请附上博文链接！

おすすめ