ajax传输

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
ajax方法
$.ajax() 执行异步 AJAX 请求
$.get() 使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码的数据
$.post() 使用 AJAX 的 HTTP POST 请求从服务器加载数据

获取数据库的数据到页面渲染页面并生成一条数据

	$(document).ready(function(){
				//获取列表数据
				$.getJSON('/admin/list',function(res){
					if(res.status){
						res.data.forEach(function(item,index) {
							//ES6新语法：模板字符串
							var $tr=$(`<tr class="small">
								  <th scope="row" class="align-middle p-1">${item.id}</th>
								  <td class="align-middle p-1">${item.username}</td>
								  <td class="align-middle p-1">${item.fullname}</td>
								  <td class="align-middle p-1">${item.sex}</td>
								  <td class="align-middle p-1">${item.tel}</td>
								  <td class="align-middle p-1">${item.email}</td>
								  <td class="align-middle p-1"><img src="../${item.avatar}" height="35px" width="40px"></td>
								  <td class="align-middle p-1">
									<a href="./userdetails.html?id=${item.id}" class="btn btn-primary edit btn-sm">编辑</a>
									 <button type="button" class="btn btn-secondary del btn-sm">删除</button>
								  </td>
								</tr>`);
								$('table tbody').append($tr);
						});
					}
				});
			});

获取数据库的数据到页面渲染页面

$(document).ready(function(){
				//获取参数
			var id=GetRequest().id;
			console.log(id);
			//获取账户资料
			$.getJSON('/admin/info',{id:id},function(res){//res为返回来的对象
				if(res.status){
					$('input[name=username]').val(res.data.username);
					$('input[name=fullname]').val(res.data.fullname);
					
					var sex=res.data.sex;
					if(sex=="男"){
						$('.men').prop("checked",true);
					}else{
						$('.women').prop("checked",true);
					}
					$('input[name=tel]').val(res.data.tel);
					$('input[name=email]').val(res.data.email);
					$('.photo').prop({src:"../"+res.data.avatar})
				}
			});
			});

表单验证+ajax传输

<form method="POST" action="/admin/login">
							<div class="form-group row">
								<label class="col-sm-2 col-form-label">账户</label>
								<div class="col-sm-10">
									<input type="text" name="username" datatype="s3-20" errormsg="请输入3-20个字符格式的账户" class="form-control ">
								</div>
							</div>
							<div class="form-group row">
								<label class="col-sm-2 col-form-label">密码</label>
								<div class="col-sm-10">
									<input type="password" name="password" datatype="n3-20" errormsg="请输入3-20个数字"  class="form-control ">
								</div>
							</div>
							<button id="login" type="submit" class="btn btn-primary btn-block">登录</button>
						</form>
<script>
			$('form').Validform({
				tiptype:function(msg,o,cssctl){
					console.log(msg);
					console.log(o);
					//判断是否存在feedback
					var $feedback= o.obj.next('.invalid-feedback');
					if($feedback.length){
						$feedback.text(msg);
					}else{
						$feedback=$('<div class="invalid-feedback">'+msg+'</div>');
						$feedback.insertAfter(o.obj);//o.boj就是input
					}
					//移除上次验证class的状态
					o.obj.removeClass("is-valid").removeClass("is-invalid");
					o.obj.removeClass("valid-feedback").removeClass("invalid-feedback")
					if(o.type==2){
						//验证通过
						o.obj.addClass('is-valid')
						
					}
					//验证失败
					if(o.type==3){
						o.obj.addClass('is-invalid')
						
					}
				},
				ajaxPost:true,
				callback:function(res){
							if(res.status){
						//登录成功
						layer.msg(res.msg);
						//缓存
						sessionStorage.id=res.data.id;
						sessionStorage.token=res.data.token;
						sessionStorage.role=res.data.role;
						//跳转页面
						location.href='./article-list.html';
					}else{
						//失败
						layer.msg(res.msg)
					}
				}
			});
		</script>

验证时form添加post方法加接口名称