技术栈
Bootstrap+ JavaScript + jQuery + AJAX +Thymeleaf
源代码
<!DOCTYPE html><html lang="en" xmlns:th="/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="/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 © <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="/npm/jquery@3.4.1/dist/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><script src="/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="/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>
运行效果
参考文章
/weixin_43272781/article/details/104301739
/docs/getting-started/introduction/
/jquery/ajax_ajax.asp
