文章目錄

一、了解Ajax
二、搭配環境
三、Ajax：jQuery $.post() 方法
- 1.了解$.post()方法
- 2.例子1
- 3.例子2：Ajax異步加載資料
- 4.例子3：使用者名驗證
四、小結

一、了解Ajax

AJAX = Asynchronous JavaScript and XML，AJAX = 異步 JavaScript 和 XML
AJAX 是一種用于建立快速動态網頁的技術。
AJAX 通過在背景與伺服器進行少量資料交換，使網頁實作異步更新。這意味着可以在不重載整個頁面的情況下，對網頁的某些部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新内容，必須重載整個頁面。

二、搭配環境

參考文章：SpringMVC

同時需要引入jQuery的js檔案。

三、Ajax：jQuery $.post() 方法

1.了解$.post()方法

$.post() 方法通過 HTTP POST 請求向伺服器送出資料。

源碼：

jQuery.each( [ "get", "post" ], function( i, method ) {
	jQuery[ method ] = function( url, data, callback, type ) {

		// Shift arguments if data argument was omitted
		if ( isFunction( data ) ) {
			type = type || callback;
			callback = data;
			data = undefined;
		}

		// The url can be an options object (which then must have .url)
		return jQuery.ajax( jQuery.extend( {
			url: url,
			type: method,
			dataType: type,
			data: data,
			success: callback
		}, jQuery.isPlainObject( url ) && url ) );
	};
} );

我們可以看到post()方法最終還是調用 ajax方法，對應的參數type=post

使用文法：

$.post({
   url: page,
   data:{"name":value},
   success: function(result){
      $("#checkResult").html(result);
   }
});

2.例子1

例子：

定義一個輸入框，它失去焦點的時候，發起一個請求（攜帶資訊）到背景，實作頁面的一個局部更新。

jsp頁面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>

    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.3.1.js"></script>

    <script>
      function fun() {
        $.post({
          url:"${pageContext.request.contextPath}/a1",
          data:{"name":$("#serch").val()},
          success:function (data) {
            alert(data);
          }
        })

      }

    </script>

  </head>
  <body>
<%--失去焦點的時候，發起一個請求（攜帶資訊）到背景--%>
  搜尋框：<input type="text" id="serch" onblur="fun()">
  </body>
</html>

url路徑對應controller類

@Controller
public class AjaxController {

    @RequestMapping("/a1")
    public void a1(String name, HttpServletResponse response) throws IOException {
        if ("hello".equals(name)){
            response.getWriter().print("true");
        }else {
            response.getWriter().print("false");
        }
    }
}

jQuery.Ajax一、了解Ajax二、搭配環境三、Ajax：jQuery $.post() 方法四、小結

3.例子2：Ajax異步加載資料

背景資料（我們可以把資料轉化成json字元串，在傳給前端，這裡暫時不這樣，怎樣轉json文章指路：JSON互動處理）

@Controller
public class AjaxController {

    @RequestMapping("/a2")
    @ResponseBody
    public List<User> user(){
        List<User> users = new ArrayList<>();

        users.add(new User(1001,"小明","abc"));
        users.add(new User(1002,"小軍","456"));
        users.add(new User(1003,"曉麗","123"));

        return users;
    }
}

jsp頁面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<input type="button" value="擷取資料" onclick="fun2()">
<table width="80%" align="center">
    <tr>
        <td>ID</td>
        <td>使用者名</td>
        <td>密碼</td>
    </tr>
    <tbody id="content">
    <%--資料從背景拿--%>
    </tbody>

</table>

<script src="${pageContext.request.contextPath}/statics/js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    function fun2() {
        $.post({
            url:"${pageContext.request.contextPath}/a2",
            success:function (data) {
                var html="";
                for (let i = 0; i < data.length; i++) {
                    html += "<tr>"+
                        "<td>"+data[i].id+"</td>"+
                        "<td>"+data[i].name+"</td>"+
                        "<td>"+data[i].pwd+"</td>"+
                        "</tr>"
                }
                $("#content").html(html)
            }
        })

    }
</script>

</body>
</html>

不需要重新整理總個界面，局部加載

jQuery.Ajax一、了解Ajax二、搭配環境三、Ajax：jQuery $.post() 方法四、小結

4.例子3：使用者名驗證

注冊使用者時，判斷使用者是否已存在：

背景資料（實際案例中使用者名資料來自資料庫，這裡暫時固定一個，前端傳來的gaolang就傳回OK，不然傳回使用者名已存在）

@Controller
public class AjaxController {

    @RequestMapping("/register")
    @ResponseBody
    public String register(String name){
        String flag = "";
        if (name.equals("gaolang")){
            flag = "OK";
        }else {
            flag = "使用者名已存在";
        }

        return flag;
    }

}

jsp頁面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        function fun3() {
            $.post({
                url:"${pageContext.request.contextPath}/register",
                data:{"name":$("#name").val()},
                success:function (data) {
                    if (data.toString()==='OK'){
                        $("#userInfo").css("color","green");
                    }
                    $("#userInfo").html(data);
                }
            })
        }
    </script>
</head>
<body>
<p>
    使用者名：<input type="text" id="name" onblur="fun3()">
    <span id="userInfo"></span>
</p>

</body>
</html>

如果出現亂碼的話，在springmvc配置檔案中加入：

<!--JSON亂碼問題配置-->
    <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

效果圖：

jQuery.Ajax一、了解Ajax二、搭配環境三、Ajax：jQuery $.post() 方法四、小結

四、小結

Ajax部分參數

jQuery.ajax(...)
      部分參數：
            url：請求位址
            type：請求方式，GET、POST（1.9.0之後用method）
        headers：請求頭
            data：要發送的資料
    contentType：即将發送資訊至伺服器的内容編碼類型
          async：是否異步
        timeout：設定請求逾時時間（毫秒）
      beforeSend：發送請求前執行的函數(全局)
        complete：完成之後執行的回調函數(全局)
        success：成功之後執行的回調函數(全局)
          error：失敗之後執行的回調函數(全局)
        accepts：通過請求頭發送給伺服器，告訴伺服器目前用戶端可接受的資料類型
        dataType：将伺服器端傳回的資料轉換成指定類型
          "xml": 将伺服器端傳回的内容轉換成xml格式
          "text": 将伺服器端傳回的内容轉換成普通文本格式
          "html": 将伺服器端傳回的内容轉換成普通文本格式，在插入DOM中時，如果包含JavaScript标簽，則會嘗試去執行。
        "script": 嘗試将傳回值當作JavaScript去執行，然後再将伺服器端傳回的内容轉換成普通文本格式
          "json": 将伺服器端傳回的内容轉換成相應的JavaScript對象
        "jsonp": JSONP 格式使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 将自動替換 ? 為正确的函數名，以執行回調函數

get和post都是 $.ajax的簡化版

通過源碼，可以看出，get和post的用法基本一樣， HTTP請求向伺服器的方式不同。

jQuery.each( [ "get", "post" ], function( i, method ) {
	jQuery[ method ] = function( url, data, callback, type ) {

		// Shift arguments if data argument was omitted
		if ( isFunction( data ) ) {
			type = type || callback;
			callback = data;
			data = undefined;
		}

		// The url can be an options object (which then must have .url)
		return jQuery.ajax( jQuery.extend( {
			url: url,
			type: method,
			dataType: type,
			data: data,
			success: callback
		}, jQuery.isPlainObject( url ) && url ) );
	};
} );

jQuery.Ajax一、了解Ajax二、搭配環境三、Ajax：jQuery $.post() 方法四、小結

文章目錄

一、了解Ajax

二、搭配環境

三、Ajax：jQuery $.post() 方法

1.了解$.post()方法

2.例子1

3.例子2：Ajax異步加載資料

4.例子3：使用者名驗證

四、小結

繼續閱讀

關于Gradle配置的小結

Java小案例——随機數猜測随機數猜測

nginx location中斜線的位置的重要性

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

Java String.format方法的簡單使用

neo4j之cypher使用文檔

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method