當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Bootstrap + Thymeleaf——预约维修前端页面设计(UI + JS数据校验 + JSON序列化 + AJAX提交)DEMO

發布時間：2024/10/5 HTML 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 Bootstrap + Thymeleaf——预约维修前端页面设计(UI + JS数据校验 + JSON序列化 + AJAX提交)DEMO 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

技術棧?

Bootstrap?+ JavaScript + jQuery + AJAX +?Thymeleaf?

源代碼

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>維修預約平臺</title><link rel="icon" th:href="@{/favicon.ico}"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><style>html,body {height: 100%;font-size: 1rem;}body {align-items: center;padding-top: 40px;padding-bottom: 40px;background-color: #f5f5f5;}@media (min-width: 576px) {html { font-size: 1.25rem; }}@media (min-width: 768px) {html { font-size: 1.5rem; }}@media (min-width: 992px) {html { font-size: 1.75rem; }}@media (min-width: 1200px) {html { font-size: 2rem; }}</style></head> <body id="application"> <div class="container"><div class="row"><div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 mx-auto"><header class="mt-5 mb-5 text-center"><h2>浙理計協維修預約平臺</h2><p class="tm-form-description">浙理計協——義務維修隊</p></header><div class="text-monospace lead text-info row-fluid"><div class="card"><div class="card-header">報修須知：</div><ul class="list-group list-group-flush"><li class="list-group-item">1.服務是免費的，如果您力所能及，請捐助我們，讓我們做的更好！</li><li class="list-group-item">2.我們提供包括但不限于以下服務<ul><li>系統安裝/重裝、軟件問題</li><li>拆機清灰</li><li>硬件升級（導購、安裝、更換等）</li><li>其他電腦問題咨詢</li></ul ></li><li class="list-group-item">3.下列情況請直接送售后服務點<ul ><li>出現明顯的硬件故障，如屏幕破損、進水等</li><li>電腦未過保修期但需要拆機的</li></ul></li><li class="list-group-item">4.非電腦產品，僅提供有限的服務</li><li class="list-group-item">5.如有其他問題，聯系客服QQ：1367138194</li></ul></div></div><h3>請認真填寫以下信息:</h3><form id="form" name="form" class="tm-form-white tm-font-big" accept-charset="UTF-8" _charset="UTF-8"><div class="text-monospace p-3 bg-light rounded row"><div class="form-group mb-5 col-xl-12 col-lg-12 col-md-12 col-sm-12"><label for="name" class="black-text mb-4 big control-label">稱呼</label><input id="name" name="name" type="text" value=""class="validate form-control tm-input-white-bg" required autofocus></div><div class="form-group mb-5 col-xl-6 col-lg-6 col-md-12 col-sm-12"><label for="tel" class="black-text mb-4 big control-label">電話（長號）</label><input id="tel" name="telephone" type="text" value=""class="validate form-control tm-input-white-bg" maxlength="11" required></div><div class="form-group mb-5 col-xl-6 col-lg-6 col-md-12 col-sm-12"><label for="qq" class="black-text mb-4 big control-label">QQ（可選）</label><input id="qq" name="qq" type="text" value=""class="validate form-control tm-input-white-bg" maxlength="10" ></div><div class="form-group mb-5 col-xl-12 col-lg-12 col-md-12 col-sm-12"><label for="brand" class="black-text mb-4 big control-label">電腦品牌</label><select id="brand" class="form-control" name="brand"><option>請選擇</option><option>Acer宏基</option><option>Dell戴爾</option><option>TOSHIBA東芝</option><option>ASUS華碩</option><option>HP惠普</option><option>Lenovo聯想</option><option>MSI微星</option><option>Apple蘋果</option><option>HASEE神舟</option><option>SAMSUNG三星</option><option>其他</option></select></div><div class="form-group mb-5 col-xl-12 col-lg-12 col-md-12 col-sm-12"><label for="address" class="black-text mb-4 big control-label">地址</label><input id="address" name="address" value="" type="text"class="form-control" required></div><div class="form-group mb-5 col-xl-12 col-lg-12 col-md-12 col-sm-12"><label for="text" class="black-text mb-2 big">故障描述(可選)</label><textarea class="form-control" name="description" id="text" cols="25" value="" rows="6"></textarea></div></div><div class="text-center mt-5"><button id="submit" type="button"class="btn btn-primary btn-large btn-large-white">Submit</button></div></form></div></div><footer class="row tm-mt-big mb-3"><div class="col-xl-12 text-center"><p class="d-inline-block tm-bg-black white-text py-2 tm-px-5">Copyright © 2020 <a rel="nofollow" href="https://www.zstuca.club">ZSTUCA</a></p></div></footer> </div> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"><div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalCenterTitle">提示</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button></div></div></div> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script type="application/javascript">$(document).ready(function() {/*** 自動將form表單封裝成json對象*/$.fn.serializeObject = function() {var o = {};var a = this.serializeArray();$.each(a, function() {if (o[this.name]) {if (!o[this.name].push) {o[this.name] = [ o[this.name] ];}o[this.name].push(this.value || '');} else {o[this.name] = this.value || '';}});return o;};//ajax請求，以json格式$("#submit").on("click", function() {if($('input#name').val()==''){$('.modal-body').text('稱呼不能為空！');$('#exampleModalCenter').modal('show');return false;}var p=$('input#tel').val();if(p==''){$('.modal-body').text("聯系電話不能為空！");$('#exampleModalCenter').modal('show');return false;}var t=/^1[3456789]\d{9}$/;if(!t.test(p)){$('.modal-body').text("聯系電話有誤！");$('#exampleModalCenter').modal('show');return false;}var qq=$('input#qq').val();/*if(qq==''){warning("QQ不能為空！");return false;}*/var qt=/^[1-9][0-9]{4,11}$/;if(qq!='' && !qt.test(qq)){$('.modal-body').text("QQ有誤！");$('#exampleModalCenter').modal('show');return false;}var add=$('input#address').val();if(add==''){$('.modal-body').text("地址不能為空！");$('#exampleModalCenter').modal('show');return false;}$.ajax({url:"./submit",type:"post",data:JSON.stringify($('#form').serializeObject()),contentType:"application/json",dataType:"json",success:function(data){if(data.code === '200'){$('.modal-body').text("提交成功！");$('#exampleModalCenter').modal('show');}else{$('.modal-body').text("提交失敗！" + data.msg);$('#exampleModalCenter').modal('show');}},error:function (XMLHttpRequest, textStatus, errorThrown) {$('.modal-body').text("提交失敗！" + textStatus);$('#exampleModalCenter').modal('show');}})});});console.log("Zstuca welcomes you!");console.log("contact us QQ:1047377010"); </script> </body> </html>

運行效果

參考文章

https://blog.csdn.net/weixin_43272781/article/details/104301739

https://v4.bootcss.com/docs/getting-started/introduction/

https://www.w3school.com.cn/jquery/ajax_ajax.asp

總結

以上是生活随笔為你收集整理的Bootstrap + Thymeleaf——预约维修前端页面设计(UI + JS数据校验 + JSON序列化 + AJAX提交)DEMO的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： jQuery——封装form表单的数据为
下一篇： Windows Security——获取