首頁 > web前端 > js教程 > 主體

JavaScript怎麼使用ajax操作表單

php中世界最好的语言
發布: 2018-03-31 13:40:28
原創
1816 人瀏覽過

這次帶給大家JavaScript怎麼使用ajax操作表單,JavaScript使用ajax操作表單的注意事項有哪些,以下就是實戰案例,一起來看一下。

用JavaScript操作表單和操作DOM是類似的,因為表單本身也是DOM樹。

不過表單的輸入框、下拉框等可以接收使用者輸入,所以用JavaScript來操作表單,可以得到使用者輸入的內容,或是對一個輸入框設定新的內容。

HTML表單的輸入控制項主要有以下幾種:

  • ##文字方塊,對應的,用於輸入文本;

  • #口令框,對應的,用於輸入口令;

  • 單選框,對應的,用於選擇一項;

  • 複選框,對應的,用於選擇多項;

  • 下拉框,對應的< ;select>,用於選擇一項;

  • 隱藏文本,對應的,使用者不可見,但表單提交時會把隱藏文字發送到伺服器。

取得值

#如果我們得到了一個節點的引用,就可以直接呼叫value取得對應的使用者輸入值:

// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用户输入的值'
登入後複製
這種方式可以套用於text、password、hidden以及select。但是,對於單選框和複選框,value屬性返回的永遠是HTML預設的值,而我們需要獲得的實際上是用戶是否「勾上了」選項,所以應該用checked判斷:

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false
登入後複製

設定值

設定值和取得值類似,對於text、password、hidden以及select,直接設定value就可以:

// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新
登入後複製
對於單選框和複選框,設定checked為true或false即可。

HTML5控件

HTML5新增了大量標準控件,常用的包括date、datetime、datetime-local、color等,它們都使用標籤:

<input type="date" value="2015-07-01">
<input type="datetime-local" value="2015-07-01T02:03:04">
<input type="color" value="#ff0000">
登入後複製
不支援HTML5的瀏覽器無法辨識新的控件,會把它們當作type="text"來顯示。支援HTML5的瀏覽器將獲得格式化的字串。例如,type="date"類型的input的value將保證是一個有效的YYYY-MM-DD格式的日期,或空字串。

提交表單

最後,JavaScript可以用兩種方式來處理表單的提交(AJAX方式在後面介紹)。

方式一是透過
元素的submit()方法提交表單,例如,回應一個
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!