使用FormData無刷新表單信息提交

用新技術FormData表單數據對象, 可以實現快速收集表單信息。

FormData是html5的新技術, 在主流瀏覽器(IE10以上版本支持)都可以正常使用。

<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
window.onload = function(){
    var fm = document.getElementsByTagName('form')[0];
    fm.onsubmit = function(evt){
    //ajax+dom無刷新獲得表單信息并傳遞給服務器
    //① 獲得表單信息
    //利用javascript提供的新技術快速、簡單地收集全部的表單域信息
    //FormData() 表單數據對象可以幫我們完成此需求
    var fd = new FormData(fm);//收集fm元素節點內部的表單域信息
    //也可寫成var fd = new FormData(this);
    //fd里邊有我們收集到的全部的表單域信息
    //② ajax傳遞表單信息
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4 && xhr.status==200){
            alert(xhr.responseText);
        }
    }
    xhr.open('post','./04.php');
    //xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
    xhr.send(fd);
    //event.returnValue=false; //IE6 7 8
    evt.preventDefault();//瀏覽器進制跳轉 主流瀏覽器
    }
}
</script>
</head>
<body>
<h2>無刷新form表單提交(FormData)</h2>
<form method="post" >
<p>用戶名：<input type="text" name="username" id="mingzi"></p>
<p>密碼：<input type="password" name="userpwd" id="mima"></p>
<p>郵箱：<input type="text" name="useremail" id="youxiang"></p>
<p><input type="submit" value="注冊"></p>
</form>
</body>
</html>

<?php
//獲得傳遞過來的post格式信息
print_r($_POST);
?>

注意：FormData使用

1 ajax不要設置header頭

2 form表單域必須有name屬性

3 IE10以上版本支持FormData, IE9不支持

.什么是PHP采集文章無刷新？

PHP采集文章無刷新是指利用PHP編程語言實現的一種技術，可以在網頁上自動獲取其他網站上的文章內容，并將其顯示在當前頁面上，且無需刷新頁面。這種技術可以大大提高用戶體驗，使用戶能夠更方便地瀏覽相關內容。

2. PHP采集文章無刷新有哪些應用場景？

PHP采集文章無刷新技術可以應用于各種場景，例如新聞聚合網站、博客網站等。通過采集其他網站上的文章內容，可以實現自動更新和展示最新的資訊內容，為用戶提供更好的閱讀體驗。

3. PHP采集文章無刷新的實現原理是什么？

PHP采集文章無刷新的實現原理主要包括兩個步驟：首先是通過PHP的curl函數庫或file_get_contents函數獲取目標網頁的HTML源代碼；然后使用正則表達式或DOM解析器等方式提取所需的文章內容，并將其插入到當前頁面中指定的位置。

4. PHP采集文章無刷新需要注意哪些問題？

在使用PHP采集文章無刷新時，需要注意以下幾點：首先，要確保所采集的網站允許被其他網站采集其內容，遵守相關法律法規；其次，要注意采集頻率，不要對目標網站造成過大的訪問壓力；此外，還要處理好字符編碼、鏈接跳轉等問題，以確保采集結果的準確性和完整性。

5. PHP采集文章無刷新的優勢是什么？

PHP采集文章無刷新具有以下幾個優勢：首先，可以實現自動化采集和展示最新內容，節省人工操作時間；其次，可以提高用戶體驗，使用戶能夠更方便地獲取相關信息；此外，可以增加網站的內容豐富度和吸引力，提高網站的流量和用戶粘性。

6. PHP采集文章無刷新的缺點是什么？

PHP采集文章無刷新也存在一些缺點：首先，由于依賴于目標網站的HTML結構和內容格式，當目標網站發生改變時，可能需要相應地修改采集代碼；其次，由于需要從其他網站獲取內容，在網絡環境不穩定或目標網站響應速度較慢時，可能會影響到頁面加載速度和用戶體驗。

7.如何使用PHP采集文章無刷新？

使用PHP采集文章無刷新可以按照以下步驟進行：首先，確定要采集的目標網站和所需的文章內容；然后，使用PHP的curl函數庫或file_get_contents函數獲取目標網頁的HTML源代碼；接著，使用正則表達式或DOM解析器等方式提取所需的文章內容，并將其插入到當前頁面中指定的位置。

8. PHP采集文章無刷新需要哪些技術儲備？

使用PHP采集文章無刷新需要具備以下技術儲備：首先，熟悉PHP編程語言的基本語法和函數庫；其次，了解HTML和CSS的基本知識，以便進行頁面內容展示和樣式調整；此外，掌握正則表達式或DOM解析器等方式提取所需內容的方法。

9. PHP采集文章無刷新有哪些常用工具或框架？

在使用PHP采集文章無刷新時，可以借助一些常用工具或框架來簡化開發流程，例如Goutte、QueryList、Simple HTML DOM等。這些工具或框架提供了豐富的API和功能，可以方便地實現對目標網頁的采集和內容提取。

篇，你可以學到Ember頁面的創建，并且在不同的頁面之間跳轉。新建兩個頁面，一個是創建about頁面，一個是創建contact頁面。

看完本篇你將學到如下知識點：

定義路由
使用路由模板
自定義路由URL
使用<LinkTo>組件在不同模板之間跳轉
組件之間傳遞參數、屬性

定義路由

在前一篇，我們定義了一個index.hbs首頁，接著繼續在templates下面創建新的頁面。

首先通過Ember CLI創建一個路由，

ember g route about

本機創建日志：

ubuntuvim at ubuntuvim-mbp.local in [~/code/super-rentals]  on git:master ?  9b5a1ac "Initial Commit from Ember CLI v3.18.0"

23:22:20 ? ember g route about

installing route

  create app/routes/about.js

  create app/templates/about.hbs

updating router

  add route about

installing route-test

  create tests/unit/routes/about-test.js

題外話：

ubuntuvim at ubuntuvim-mbp.local in [~/code/super-rentals] on git:master ? 9b5a1ac "Initial Commit from Ember CLI v3.18.0"

23:22:20 ?

這一段是我本機命令行自動前綴，如果你的命令行安裝過zsh這個工具，就會很熟悉，zsh是一個非常強大而且漂亮的命令行工具。

打開router.js，可以看到自動創建了一個路由this.route('about');

使用路由模板

修改about路由模板文件app/templates/about.hbs，在文件內添加一下HTML內容。

{{!-- app/templates/about.hbs --}}

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>About Super Rentals</h2>
  <p>
    The Super Rentals website is a delightful project created to explore Ember.
    By building a property rental site, we can simultaneously imagine traveling
    AND building Ember applications.
  </p>
</div>

瀏覽器訪問驗證：http://localhost:4200/about。可以看到about頁面的內容

使用同樣的方式創建contact路由。

ubuntuvim at ubuntuvim-mbp.local in [~/code/super-rentals]  on git:master ?  9b5a1ac "Initial Commit from Ember CLI v3.18.0"

23:22:37 ? ember g route contact

installing route

  create app/routes/contact.js

  create app/templates/contact.hbs

updating router

  add route contact

installing route-test

  create tests/unit/routes/contact-test.js

在contact.hbs添加一些HTML內容。

{{!-- app/templates/contact.hbs --}}
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Contact Us</h2>
  <p>
    Super Rentals Representatives would love to help you<br>
    choose a destination or answer any questions you may have.
  </p>
  <address>
    Super Rentals HQ
    <p>
      1212 Test Address Avenue<br>
      Testington, OR 97233
    </p>
    <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
    <a href="mailto:superrentalsrep@emberjs.com">superrentalsrep@emberjs.com</a>
  </address>
</div>

瀏覽器訪問驗證：http://localhost:4200/contact。可以看到contact頁面的內容

contact1.png

自定義路由URL

前面已經定義了兩個頁面，一個是about一個是contact。默認情況下訪問的路徑都是和路由同名的，另外Ember提供了非常靈活的擴展，你可以自定義的路由的訪問路徑，比如下面的代碼，把contact路由的訪問路徑改為getting-in-touch，手動修改router.js文件。

Router.map(function() {
  this.route('about');
  this.route('contact', { path: '/getting-in-touch' });
});

注意看第三行，使用path屬性指定這個路由的訪問路徑為getting-in-touch。

現在你在訪問http://localhost:4200/contact就會發現報錯了，提示找不到這個路由了。

contact2.png

再訪問http://localhost:4200/getting-in-touch。可以看到頁面的內容就是之前contact的內容。

contact3.png

使用<LinkTo>組件在不同模板之間跳轉

<LinkTo>是Ember提供好的組件，用于在不同模板之間跳轉，其作用類似于HTML標簽中的<a>標簽。

為何不直接用<a>標簽而是要自定義一個跳轉的組件呢？？因為使用普通的<a>標簽，當你點擊鏈接的時候會發送瀏覽器的刷新，但是Ember是單頁應用不需要刷新整個頁面，只要是實現頁面的跳轉即可（所謂的跳轉其實就是實現不同的路由之間的切換，并且不會刷新頁面）。

繼續改造前面的創建的index,about和contact。分別在這兩個模板頁面中添加一個跳轉的鏈接。

{{!-- index.hbs是 "/" 這個路徑默認的頁面。 --}}

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Welcome to Super Rentals!</h2>
  <p>We hope you find exactly what you're looking for in a place to stay.</p>
  
  {{!-- 使用LinkTo組件添加一個跳轉按鈕，并且指定調整到的路由是about，也就是說當用戶點擊這按鈕的時候會跳轉到about這個子頁面上 --}}
  <LinkTo @route="about" class="button">About Us</LinkTo>
  

  
  <a href="/about" class="button">About Us With A Tag</a>
</div>

index5.png

點擊“About Us”這個按鈕，然后看瀏覽器的地址欄，可以看到自動轉到about這個路由下，并且頁面不會刷新。為了驗證前面所說的效果，我在About Us后面添加了一個<a>標簽按鈕，當你點擊這個鏈接的時候會看到瀏覽器自動刷新了，并且也跳轉到about頁面上。

index6.png

繼續改造about和contact，分別添加跳轉按鈕。

{{!-- app/templates/about.hbs --}}
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>About Super Rentals</h2>
  <p>
    The Super Rentals website is a delightful project created to explore Ember.
    By building a property rental site, we can simultaneously imagine traveling
    AND building Ember applications.
  </p>
  
  <LinkTo @route="contact" class="button">Contact Us</LinkTo>
  {{!-- 增加一個跳轉回到首頁的鏈接 --}}
  <LinkTo @route="index" class="button">Index</LinkTo>
</div>

{{!-- app/templates/contact.hbs --}}
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Contact Us</h2>
  <p>
    Super Rentals Representatives would love to help you<br>
    choose a destination or answer any questions you may have.
  </p>
  <address>
    Super Rentals HQ
    <p>
      1212 Test Address Avenue<br>
      Testington, OR 97233
    </p>
    <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
    <a href="mailto:superrentalsrep@emberjs.com">superrentalsrep@emberjs.com</a>
  </address>
  
  <LinkTo @route="about" class="button">About</LinkTo>
  {{!-- 增加一個跳轉回到首頁的鏈接 --}}
  <LinkTo @route="index" class="button">Index</LinkTo>
</div>

在about和contact兩個頁面添加了兩個跳轉按鈕，一個是about和contact頁面的相互跳轉，一個是跳轉回首頁的按鈕。

about3.png

contact4.png

通過前面的這三個頁面，相信你很容易就可以掌握<LinkTo>組件的使用。其中@route屬性指定的是你定義的路由名字，這個路由的名字要和router.js里面的定義的完全一致，否則會找不到。另外需要注意的是@route屬性的值一定是路由的名字而不是URL的名字，比如contact路由，這個路由的路由名是contact而不是訪問的getting-in-touch。

另外在<LinkTo>組件上可以使用普通的HTML屬性，比如上面使用的class屬性，這個class屬性就是普通HTML屬性，用于指定CSS樣式的。在Ember應用中，通過@符號區別是普通的HTML屬性還是Ember提供的屬性，比如上面使用的@route就是Ember提供的屬性。

在底層，<LinkTo>組件會為我們生成一個常規的<a>標簽，并帶有針對特定路由的href。通過Ember生成的這個<a>標簽對于用戶來說非常友好，無需頁面刷新就可以實現跳轉。簡單講，當單擊這些特殊鏈接之一時，Ember將攔截該單擊，呈現新頁面的內容，并更新URL（所有這些操作均在本地執行，而無需等待服務器），從而避免刷新整個頁面。

在線咨詢

上一篇：css實現發光的input輸入框
下一篇：前端入門-html 表單控件使用

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。