简单的jQuery和Ajax实例:表单+按钮事件+select2下拉选项

jQuery和Ajax实例

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

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

要求页面使用bootstrap网格系统,使用jQuery实现,不能使用原生JS,下拉框使用select2。
简单的jQuery和Ajax实例:表单+按钮事件+select2下拉选项_第1张图片

步骤

  1. 首先将静态页面写好。
  • 百度查找bootstrap框架和jQuery的css和js,并在代码中引入。
    
    <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>
    		
    		<link href="css/bootstrap.min.css" rel="stylesheet">
    	head>
    
    	<body>
    		
    		
    		<script src="js/jquery-1.11.3.min.js">script>
    		
    		<script src="js/bootstrap.min.js">script>
    	body>
    
    html>
    
    • 编写表单和按钮等页面所需元素。
      由于使用bootstrap框架,排版变得非常便捷。
    <div class="container">
    		<div class="row">
    			<div class="col-md-12"> 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"> 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>
    					
    				select>
    			div>
    
    		div>
    		<div class="row">
    			<div class="col-md-12"> 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>
    
  1. 百度查找加入select2下拉框的css和js文件
    
    <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>
    
    此时可以看到页面是这样:
    简单的jQuery和Ajax实例:表单+按钮事件+select2下拉选项_第2张图片
    select框变得十分好看。点进去可以看到有一个搜索框。
    简单的jQuery和Ajax实例:表单+按钮事件+select2下拉选项_第3张图片
  2. 写一个接口
  • 接口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);
        }
    
  1. 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>
    
  2. 使用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("+data.data[i]+"");
    			/*$("#man").val(data.data[0]);
    			$("#man").html(data.data[0]);
    			$("#famle").val(data.data[1]);
    			$("#famle").html(data.data[1]);*/
    			}
    		}
    	})
    

错误示范:学习过程遇到的问题

  1. 500服务器错误
    在这里插入图片描述错误代码:
    简单的jQuery和Ajax实例:表单+按钮事件+select2下拉选项_第4张图片
    修改:在外面建一个变量,然后用JSON.stringify()那个变量,再加一个属性:contentType:‘application/json’。

  2. 不稳妥的下拉框代码
    简单的jQuery和Ajax实例:表单+按钮事件+select2下拉选项_第5张图片
    简单的jQuery和Ajax实例:表单+按钮事件+select2下拉选项_第6张图片
    如果接口返回100个数据,挨个赋值不太现实。

  3. 循环option错误
    简单的jQuery和Ajax实例:表单+按钮事件+select2下拉选项_第7张图片
    正确修改:
    简单的jQuery和Ajax实例:表单+按钮事件+select2下拉选项_第8张图片

总结

学习需要多百度。多多向他人学习。
源码传送门:
https://download.csdn.net/download/qq_41306364/12134167。

你可能感兴趣的:(jQuery和Ajax学习,项目经验,简单的jQuery和Ajax,前端传值实例,前端怎么通过Ajax传值,Ajax连接前后端)