簡單的ajax和jquery的文章外文翻譯-其他專業(yè)-資料下載頁
2025-01-19 01:08本頁面
【導(dǎo)讀】What‘sAjax?application.What‘sjQuery?required.onsteroids.appendthetext―HelloWorld!$("").append("HelloWorld!").css("color","red");Easy!$("").append("HelloWorld!");$("").css("color","red");
【正文】 的 :它輸出一個隨機的報價。注意 ,這段代碼并不輸出 XML 它僅僅輸出原始文本 : ?php header(CacheControl: nocache)。 Ideally, you39。d put these in a text file or a database. Put an entry on each line of 39。39。 and use $prefixes = file()。 You can do the same with a separate file for $suffixes. $prefixes = array(39。Mashup39。,39。39。,39。Tagging39。,39。Folksonomy39。)。 $suffixes = array(39。Web39。,39。Push39。,39。Media39。,39。GUI39。)。 This selects a random element of each array on the fly echo $prefixes[rand(0,count($prefixes)1)] . is the new . $suffixes[rand(0,count($prefixes)1)]。 Example output: Tagging is the new Media ? 這里 ,我使用了 ie 瀏覽器 cache control 頭部響應(yīng)。因為有一個習(xí)慣緩存的頁面具有相同的 URL,即使內(nèi)容頁面之間的不同。很明顯 ,這一目的的腳本 ——一個 8 新的引用的生產(chǎn)在每個負載。我們可以使用 jQuery 來包括一個隨機數(shù) ,然后在URL被丟棄 ,但很容易解決這個問題在服務(wù)器端緩存比客戶端。 客戶端代碼（ HTML） 讓我們開始創(chuàng)建的 HTML 前端 ,那么我們的 Ajax工作它。所有我們需要的頁面是一個按鈕 ,用戶可以點擊請求另一個報價 ,一個 div,我們要把這個報價 ,一旦我們收到從服務(wù)器。我們將使用 jQuery選擇此 div 和加載報價 ,我們將參考 div 的id。如果我們想 ,我們可以使用 jQuery來加載引用到多個元素的幫助下 ,一個類 ,但是一個 id,所有我們需要的只是現(xiàn)在。讓我們把這個內(nèi)容我們身體的元素 : input type=text input type=submit id=generate value=Generate! div id=quote/div 我們可以把報價里面 div。通常 ,我們會有一個漫長的 onSubmit事件為按鈕 (輸入 id 為 ―生成 ‖)。有時 ,我們就有了一個 onSubmit 事件處理程序 ,稱為一個JavaScript 函數(shù)。但在 jQuery中 ,我們甚至不需要觸碰 HTML——我們可以單獨的行為 (事件處理程序 )從結(jié)構(gòu) (頁面的 HTML)輕松。 客戶端代碼（ jquery） 它的時候把我們的后端一起使用 jQuery的前端。我前面提到的 ,我們可以選擇從 DOM 元素與 jQuery。首先 ,我們必須選擇按鈕 ,并分配給它一個 onClick事件處理程序。在代碼中為這個事件 ,我們可以選擇 div 和負載的內(nèi)容腳本到它。這里的語法單擊事件處理程序 $(element expression).click(function(){ Code goes here })。 正如您可能已經(jīng)知道 ,如果我們選擇這個元素的 CSS,將確認 ,我們做我們的選擇使用元素的 id 屬性。您可以使用完全相同的語法和 jQuery。因此 ,選擇按鈕id 為 ?generate‘(我們給它上面 ),我們可以使用元素表達式 生成。此外 ,一定要知道這種語法定義了我們的事件處理程序作為一個匿名函數(shù)在事件本身 。 馬克 Wubben的 JavaScript 術(shù)語頁面提供了一個很好的解釋的匿名函數(shù) ,如果你想要知道更多 。 我們將使用一個 jQuery的更高層 次的 Ajax函數(shù) ,load()。讓我們假設(shè)我們保存為 生成器腳本。讓我們與我們的客戶端集成的幫助下 load()函數(shù) : $(generate).click(function(){ $(quote).load()。 })。 這是它 :三行代碼 ,和我們有功能齊全的 Ajax隨機引用發(fā)電機 !嗯 ,差不多。問題是 ,代碼使用 JavaScript 并不是在一個函數(shù)執(zhí)行一旦瀏覽器到達它呈現(xiàn)期間 —不是一次頁面完成的渲染。因此 ,這個代碼將嘗試連接到一個元素 ,還沒有加載。通常 ,我們會用窗口。 onload 處理這個問題。然而 ,這種方法有一個局限是 ,窗口。onload 叫做一旦一切都已完成加載 圖像和所有。我們等待著那些不感興趣的圖片 ——這只是 DOM,我們想要訪問。幸運的是 ,jQuery已經(jīng) $(文檔 )項 (),正如它的名字所表明的 ,時執(zhí)行 DOM 是準備被操縱 完整的代碼 下面是完整的代碼 ,包括 $(文檔 )。準備好了包裝器和一些基本的 HTML和 9 CSS html head titleAjax with jQuery Example/title script type=text/JavaScript $(document).ready(function(){ $(generate).click(function(){ $(quote p).load()。 })。 })。 /script style type=text/css wrapper { width: 240px。 height: 80px。 margin: auto。 padding: 10px。 margintop: 10px。 border: 1px solid black。 textalign: center。 } /style /head body div id=wrapper div id=quotep /p/div input type=submit id=generate value=Generate! /div /body /html 這段代碼中還包含了這個可下載 zip 文件中。記住 ,該代碼假設(shè) jQuery庫已被保存為 jQuery。 js在相同的文件夾中 PHP腳本和 HTML前端?，F(xiàn)在 ,你熟悉 jQuery,讓我們進入到更加復(fù)雜的東西 :表單元素和 XML處理。這是真正的 Ajax !
試題試卷相關(guān)推薦
鄂ICP備17016276號-1