JQuery快速入門-Ajax

時間 2019-12-11

標籤 jquery 快速入門 ajax 欄目 JQuery 简体版

原文原文鏈接

1、AJAX概述

概念：AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。javascript

優勢：經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。html

　　　AJAX 不須要任何瀏覽器插件，但須要用戶容許JavaScript在瀏覽器上執行。前端

　　　傳統的網頁（不使用 AJAX）若是須要更新內容，必需重載整個網頁面。java

使用普遍：有不少使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等。jquery

2、AJAX工做原理

3、AJAX應用

例子1：使用ajax修改html文本ajax

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;  //定義局部變量xmlhttp
	if (window.XMLHttpRequest) //XMLHttpRequet對象用於和服務器交互數據。
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 瀏覽器執行代碼
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改該文本內容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改內容</button>

</body>
</html>

總體流程：數據庫

一、點擊按鈕‘修改內容’，則會加載loadXMLDoc()函數；json

二、loadXMLDoc()函數的內容：瀏覽器

　　定義局部變量xmlhttp對象，用於和服務器交互數據。緩存

　　若是向服務器請求完成，且服務器響應已就緒時，進行以下操做：

　　　　一、設定操做。（本例設定修改id='myDiv‘的元素的內容。）

　　　　二、準備數據；（獲取數據的方法、url、是否異步）

　　　　三、發送數據。（將數據發送給服務器）

注意：

一、獲取數據的方法採用：GET仍是POST？

與 POST 相比，GET 更簡單也更快，而且在大部分狀況下都能用。

然而，在如下狀況中，請使用 POST 請求：

沒法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

二、發送數據時，使用同步仍是異步？

　　當您使用 async=false 時，請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句後面便可

4、JQuery中的ajax

一、load方法

load() 方法從服務器加載數據，並把返回的數據放入被選元素中。

語法：$(selector).load(URL,data,callback);

例子：立即button時，若是加載成功，則提示‘外部內容加載成功！’；若是加載失敗，則提示：‘Error: 404: Not Found’

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/example/jquery/demo_tes.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("外部內容加載成功！"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 來改變文本</h2></div>
<button>得到外部內容</button>

</body>
</html>

二、post方法

語法：jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

參數	描述
url	必需。規定把請求發送到哪一個 URL。
data	可選。映射或字符串值。規定連同請求發送到服務器的數據。
success(data, textStatus, jqXHR)	可選。請求成功時執行的回調函數。
dataType	可選。規定預期的服務器響應的數據類型。默認執行智能判斷（xml、json、script 或 html）。

視圖函數：

@app.route('/user/add/', methods=['POST'])          #將url path=/user/add的post請求交由add_user處理
@login_required
def add_user():
    username = request.form.get('username', '')
    password = request.form.get('password', '')
    age = request.form.get('age', '')
    _session_id = session['user']['id']
    _session_username = session['user']['username']
   

    #檢查用戶信息是否合法
    _is_ok, _error = User.validate_add_user(_session_username,username, password, age)
    if _is_ok:
        User.add_user(username, password, age)      #檢查ok，添加用戶信息
    return json.dumps({'is_ok':_is_ok, "error":_error})

前端經過ajax修改數據：

 var params = {};
        params['username'] = jQuery('#user-username').val();  //獲取id=password-userid的值
        params['password'] = jQuery('#user-password').val(); //獲取id=password-manager-password的值
        params['age'] = jQuery('#user-age').val(); //獲取id=password-user-password的值
        console.log(params);  //控制檯顯示
        //經過ajax更新用戶密碼
        jQuery.post('/user/add/',
            params,
            function(data) {
              if(data['is_ok']){
                alert('添加用戶成功');
                jQuery('#add-user').modal('hide');   //更新成功後，自動消失框框
                //window.location.replace('/users/');
                //window.location.reload();
              } else {
                alert(data['error']);
              }
            },
            'json'
        );