欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何在jQuery中實現(xiàn)Ajax功能-創(chuàng)新互聯(lián)

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何在jQuery中實現(xiàn)Ajax功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的河北網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

加載 jQuery

為了使用 jQuery 您需要先下載它，然后將其放置在您應(yīng)用的靜態(tài)文件夾中，并確認(rèn)他被加載了。理想的情況下是，您有一個用于所有頁面的布局模板。要加載 jQuery 您只需要在這個布局模板中 <body> 標(biāo)簽的最下方添加一個 script 標(biāo)簽。

<script type=text/javascript src="{{
 url_for('static', filename='jquery.js') }}"></script>

另一個加載 jQuery 的技巧是使用 Google 的 AJAX Libraries API :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="{{
 url_for('static', filename='jquery.js') }}">\x3C/script>')</script>

在以上配置的情況下，您需要將 jQuery 放置到靜態(tài)文件夾當(dāng)中作為一個備份。瀏覽器將會首先嘗試直接從 Google 加載 jQuery。如果您的用戶至少一次訪問過使用 Google 提供的的 jQuery 版本的話，瀏覽器就會緩存這個代碼，這樣您的網(wǎng)站就可以從中獲得加載更快的好處了。

我的站點在哪?

您知道您的應(yīng)用在哪里運行么？如果您在開發(fā)過程當(dāng)中，那么答案非常簡單: 它運行在本地端口，而且就在這個 URL 的根路徑位置。但是如果您后來決定將您的應(yīng)喲ing移動到一個不同的未知怎么辦？比如 http://example.com/myapp ？ 在服務(wù)器這邊，這從來不是一個問題，原因是我們使用的 url_for() 函數(shù)可以幫我們回答這個問題。但是如果我們在使用 jQuery 我們不應(yīng)該將指向應(yīng)用的路徑硬編碼到程序中，而是將它動態(tài)化。該如何做到這點呢？

一個簡單的技巧可能是為我們的頁面添加一個 script 標(biāo)簽，然后設(shè)定一個全局變量作為一個應(yīng)用根路徑的前綴。如下所示:

<script type=text/javascript>
 $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>

這里的 |safe 是必要的。這樣 Jinja 才不會將 JSON 編碼的字符串以 HTML 的規(guī)則過濾處理掉。通常這種過濾是必要的，但是在 script 標(biāo)簽塊當(dāng)中有著不同于原先的過濾規(guī)則。

可能有用的信息

在 HTML 中， script 標(biāo)簽被聲明為 CDATA 。這意味著 HTML 轉(zhuǎn)義實體將不會被解析。在 </script> 出現(xiàn)之前的所有內(nèi)容都被當(dāng)做腳本處理。這也意味著在 script 標(biāo)簽的內(nèi)容之中不應(yīng)該出現(xiàn) </ 字樣。|tojson 足以在這里完成正確的事情，他將會為您過濾掉斜杠({{ "</script>"|tojson|safe }} 將會被渲染成 "<\/script>")。

JSON 視圖函數(shù)

現(xiàn)在讓我們創(chuàng)建一個服務(wù)端函數(shù)，這個服務(wù)端函數(shù)接收兩個數(shù)字形式的 URL 參數(shù)， 然后將這兩個數(shù)字相加并以 JSON 對象的形式返回給應(yīng)用。這是一個相當(dāng)可笑的例子， 您通常會在服務(wù)端直接實現(xiàn)這個功能。但是這是一個方便展示如何配合使用 jQuery 和 Flask 最簡單的例子了:

from flask import Flask, jsonify, render_template, request
app = Flask(__name__)
@app.route('/_add_numbers')
def add_numbers():
  a = request.args.get('a', 0, type=int)
  b = request.args.get('b', 0, type=int)
  return jsonify(result=a + b)
@app.route('/')
def index():
  return render_template('index.html')

正如您所見，我們在這里添加了一個 index 函數(shù)，這個函數(shù)用于渲染一個模板。 這個模板將會按照上面的提供的方法加載 jQuery ，并且包含一個小表單用于提供加法運算的兩個數(shù)，同時表單還提供了用于激發(fā)服務(wù)器端函數(shù)的一個鏈接。

注意，這里我們使用不會拋出錯誤的 get() 方法。 如果對應(yīng)的鍵不存在，一個默認(rèn)值(這里是 0)將hi被返回。更進(jìn)一步，我們還可以將值轉(zhuǎn)換為一個特定類型(就像我們這里的 int 類型)。這對于由腳本(APIs,JavaScript等)激發(fā)的代碼來說是個非常順手的工具，因為在這種情況下您不需要特別的錯誤報告。

HTML 部分

您的 index.html 要么繼承一個已經(jīng)加載了 jQuery 且設(shè)定了 $SCRIPT_ROOT 環(huán)境變量的 layout.html 模板，要么自己在上方完成了這些事。以下是我們的小應(yīng)用 (index.html) 所需的 HTML 代碼。請注意這里我們也將腳本直接寫入了 HTML。通常來講，將腳本代碼放置到一個獨立的腳本文件里是一個更好的點子。

<script type=text/javascript>
 $(function() {
  $('a#calculate').bind('click', function() {
   $.getJSON($SCRIPT_ROOT + '/_add_numbers', {
    a: $('input[name="a"]').val(),
    b: $('input[name="b"]').val()
   }, function(data) {
    $("#result").text(data.result);
   });
   return false;
  });
 });
</script>
<h2>jQuery Example</h2>
<p><input type=text size=5 name=a> +
  <input type=text size=5 name=b> =
  <span id=result>?</span>
<p><a href=# id=calculate>calculate server side</a>

我們不會過多介紹 jQuery 使用的細(xì)節(jié)，僅僅對以上代買做一個快速的解釋:

  1. $(function() { ... }) 將會在瀏覽器加載完頁面的基礎(chǔ)內(nèi)容之后立即執(zhí)行。

  2. $('selector') 選擇一個用于操作的元素。

  3. element.bind('event', func) 指定元素被單擊時運行的函數(shù)，如果這個函數(shù)返回 false ，那么單擊操作的默認(rèn)行為將被取消。在本例中，點擊操作的默認(rèn)行為是導(dǎo)航到 # 鏈接標(biāo)簽。

  4. $.getJSON(url, data, func) 發(fā)送一個 GET 請求給 url ，其中 data 對象的內(nèi)容將以查詢參數(shù)的形式發(fā)送。一旦數(shù)據(jù)抵達(dá)，它將以返回值作為參數(shù)執(zhí)行給定的函數(shù)。請注意，我們在這里可以使用我們先前設(shè)定的 $SCRIPT_ROOT 變量。

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進(jìn)行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發(fā)網(wǎng)站。

上述就是小編為大家分享的如何在jQuery中實現(xiàn)Ajax功能了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前題目：如何在jQuery中實現(xiàn)Ajax功能-創(chuàng)新互聯(lián)
文章來源：http://chinadenli.net/article20/ddhhco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、響應(yīng)式網(wǎng)站、ChatGPT、網(wǎng)站營銷、網(wǎng)站內(nèi)鏈、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名