jQuery和Ajax实例

本次由于疫情，需要在家停留至10日，才能去上海返工。望病毒早日整治完毕，祝愿世间万物百毒不侵！在家学习前端知识，学习了 jQuery和Ajax，此次实例使用到bootstrap框架。

需求：写一个页面，有账号和密码框，还有性别下拉框，确认按钮，点击确认，将所输内容弹出在alert框上。

要求页面使用bootstrap网格系统，使用jQuery实现，不能使用原生JS，下拉框使用select2。
在这里插入图片描述

步骤

首先将静态页面写好。

百度查找bootstrap框架和jQuery的css和js，并在代码中引入。

<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrap和JQuery学习</title>
		<!-- 引入Bootstrap核心样式文件 -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
	</head>

	<body>
		<!--前端开发建议：网站优化时，除了立即需要工作的js存放在head外，将大部分JS文件放在页面的末尾-->
		<!-- 引入jQuery核心js文件，必须放置在bootStrap.js前面！ -->
		<script src="js/jquery-1.11.3.min.js"></script>
		<!-- 引入BootStrap核心js文件 -->
		<script src="js/bootstrap.min.js"></script>
	</body>

</html>

编写表单和按钮等页面所需元素。
由于使用bootstrap框架，排版变得非常便捷。

<div class="container">
		<div class="row">
			<div class="col-md-12">&nbsp;</div>
		</div>
		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-md-2 text-right">账号：</div>
			<div class="col-md-2"><input id="zh" type="text" /></div>
			<div class="col-md-2 text-right">密码：</div>
			<div class="col-md-2"><input id="mm" type="password" /></div>
			<div class="col-md-2"></div>
		</div>
		<div class="row">
			<div class="col-md-12">&nbsp;</div>
		</div>
		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-md-2 text-right">性别：</div>
			<div class="col-md-2">
				<select class="form-control" id="id_select2_demo1">
					<option value="">-----请选择-----</option>
					<!--<option id="man" value="0">男</option>
					<option id="famle" value="1">女</option>-->
				</select>
			</div>

		</div>
		<div class="row">
			<div class="col-md-12">&nbsp;</div>
		</div>
		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-md-2"></div>
			<div class="col-md-2"><button id="confirm" type="text">确认</button></div>
		</div>
		<!--<div class="row">
			<div class="col-md-12">&nbsp;</div>
		</div>
		<div class="row" style="border: 1px solid #0F0F0F;">
			<div class="col-md-4 bg-success">col4</div>
			<div class="col-md-6 bg-warning">col6</div>
		</div>-->
	</div>

百度查找加入select2下拉框的css和js文件

<!-- 加载 Select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>

并在js中写一个变量声明。

<script>
$(function() {
	var selectorx = $('#id_select2_demo1').select2();
}
</script>

此时可以看到页面是这样：
在这里插入图片描述

select框变得十分好看。点进去可以看到有一个搜索框。
在这里插入图片描述

写一个接口

接口List内容是个写“死”的数据“男”和“女”。后端直接返回一个字符串list，里面放男和女，这样会自动解析成前端需要的json格式数据。

@ApiOperation(value = "性别")
	@PostMapping("gender")
    public Message gender(@RequestBody SexVM sexVM){
        List<String> list = new ArrayList<>();
        list.add("男");
        list.add("女");
        return MessageUtil.success(list);
    }

alert弹窗

<script>
			$(function() {
				var z = $("#zh");
				var m = $("#mm");
				var selectorx = $('#id_select2_demo1').select2();
				$("#confirm").click(function() {
					alert("账号：" + z.val() + " 密码：" + m.val() + " 性别：" + selectorx.val())
				});
			});
		</script>

使用Ajax调用接口

var obj = {
	"sex": "string"
};
$.ajax({
		//请求方式为post
		type: 'POST',
		url: "http://localhost:8888/user/gender",
		dataType: "json",
		contentType:'application/json',
		data: JSON.stringify(obj),
		success: function(data) {
			console.log(data.data[0]);
			console.log(data.data[1]);
			for (let i=0;i<data.data.length;i++) {
			$("#id_select2_demo1").append("<option value='"+data.data[i]+"'>"+data.data[i]+"</option>");
			/*$("#man").val(data.data[0]);
			$("#man").html(data.data[0]);
			$("#famle").val(data.data[1]);
			$("#famle").html(data.data[1]);*/
			}
		}
	})