jQuery是一種流行的JavaScript框架,可以處理HTML文檔的各種操作。在表單數據顯示方面,我們可以使用jQuery的一些功能來有效地呈現出用戶輸入的數據。
//提交表單 $('form').submit(function(event) { event.preventDefault(); //防止表單提交導致頁面刷新 var formData = $(this).serializeArray(); //序列化表單數據 var displayData = "<ul>"; //創建HTML列表 //遍歷表單數據 $.each(formData, function(index, field) { displayData += "<li>" + field.name + ": " + field.value + "</li>"; //添加數據到列表中 }); displayData += "</ul>"; //結束HTML列表 $('#display').html(displayData); //將數據呈現到頁面上的<div>元素中 });
在這段代碼中,我們使用了jQuery的事件監聽功能來捕捉表單提交的結果。使用serializeArray()
方法可以將表單數據序列化為一組JSON表示的數據,便于我們后續處理。使用each()
方法可以遍歷每個表單數據元素,并將其呈現在HTML的列表中。最后,我們將呈現出的數據添加到頁面上指定的元素中。