用ajax +bootstrap实现前后端交互之 注册，登录，查询数据，修改和删除数据（css自行下载）

最新推荐文章于 2021-12-26 18:00:00 发布
最新推荐文章于 2021-12-26 18:00:00 发布
阅读量3k 收藏 18
点赞数 3
分类专栏： 学习 文章标签： mysql ajax javascript php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/OrdnAry/article/details/108450024
版权

1.1 注册页面 register.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>注册</title>
		<link rel="stylesheet" href="../css/bootstrap.min.css">
		<style>
			#register{width: 400px; margin: 150px auto}
			#alert_info{margin: 2px; padding: 2px;text-align: center; margin-bottom: 10px; display: none}
		</style>
		<script src = '../ajax.js'></script>
		<script>
			window.onload = function(){
				var oBtn = document.getElementById("btn1");
				var oAlert = document.getElementById("alert_info");
				var aInputs = document.getElementsByTagName("input");

				oBtn.onclick = function(){
					$ajax({
						method: "post",
						url: "register.php",
						data: {
							username: aInputs[0].value,
							password: aInputs[1].value,
							addTime: new Date().getTime()
						},
						success: function(result){
							var obj = JSON.parse(result);
							if(obj.code){
								oAlert.className = 'alert alert-danger';
							}else{
								oAlert.className = 'alert alert-success';
								setTimeout(function(){
									location.href = "login.html";
								}, 1000);
							}
							oAlert.style.display = 'block';
							oAlert.innerHTML = obj.message;
						},
						error: function(msg){
							alert(msg);
						}
					})
				}
			}

		</script>
	</head>
	<body>
		<div class = 'container'>
			<div class = 'panel panel-primary' id = 'register'>
				<div class = 'panel-heading'>
					注册
				</div>
				<div class = 'panel-body'>
					<div class = 'form-group'>
						<label for="username">用户名：</label>
						<input type="text" name = 'username' class = 'form-control'>
					</div>
					<div class = 'form-group'>
						<label for="password">密码：</label>
						<input type="text" name = 'password' class = 'form-control'>
					</div>
					<div id = 'alert_info' class = 'alert alert-danger'>xxxxx</div>
					<a href="login.html">马上登录</a>
					<button id = 'btn1' class = 'btn btn-primary pull-right'>注册</button>
				</div>
			</div>
		</div>
	</body>
</html>

1.2 register.php

<?php 
	header("Content-type:text/html;charset=utf-8");
	//统一发返回格式
	$responseData = array("code" => 0, "message" => "");
	//取出传过来的数据
	$username = $_POST["username"];
	$password = $_POST["password"];
	$addTime = $_POST["addTime"];

	//简单的验证
	if(!$username){
		$responseData["code"] = 1;
		$responseData["message"] = "用户名不能为空";
		echo json_encode($responseData);
		exit;
	}
	if(!$password){
		$responseData["code"] = 2;
		$responseData["message"] = "密码不能为空";
		echo json_encode($responseData);
		exit;
	}
	
	//链接数据库
	$link = mysql_connect("localhost", "root", "root");

	//2、判断是否连接成功
	if(!$link){
		echo "链接失败";
		$responseData["code"] = 3;
		$responseData["message"] = "数据库链接失败";
		echo json_encode($responseData);
		exit; //终止后续所有的代码
	}

	//3、设置字符集
	mysql_set_charset('utf8');

	//4、选择数据库
	mysql_select_db("yyy");
	//5、准备sql  验证用户名是否重名
	$sql1 = "SELECT * FROM users WHERE username='{$username}'";

	//6、发送sql语句
	$res = mysql_query($sql1);
	//7、取出一行数据
	$row = mysql_fetch_assoc($res);
	
	if($row){
		//用户名重名
		$responseData["code"] = 4;
		$responseData["message"] = "用户已存在";
		echo json_encode($responseData);
		exit;
	}
	//md5加密
	// $str = md5(md5(md5($password)."xxx")."yyy");

	//准备sql将数据插入到数据库中
	$sql2 = "INSERT INTO users(username,password,create_time) VALUES('{$username}','{$password}',{$addTime})";
	
	//返回布尔值
	$res = mysql_query($sql2);
	if(!$res){
		$responseData["code"] = 5;
		$responseData["message"] = "注册失败";
		echo json_encode($responseData);
	}else{
		$responseData["message"] = "注册成功";
		echo json_encode($responseData);
	}

	mysql_close($link);
 ?>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.1 登录页面 login.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<link rel="stylesheet" href="../css/bootstrap.min.css">
		<style>
			#register{width: 400px; margin: 150px auto}
			#alert_info{margin: 2px; padding: 2px;text-align: center; margin-bottom: 10px; display: none}
		</style>
		<script src = '../ajax.js'></script>
		<script>
			window.onload = function(){
				var oBtn = document.getElementById("btn1");
				var oAlert = document.getElementById("alert_info");
				var aInputs = document.getElementsByTagName("input");

				oBtn.onclick = function(){
					$ajax({
						method: "post",
						url: "login.php",
						data: {
							username: aInputs[0].value,
							password: aInputs[1].value
						},
						success: function(result){
							var obj = JSON.parse(result);
							if(obj.code){
								oAlert.className = 'alert alert-danger';
							}else{
								oAlert.className = 'alert alert-success';
								setTimeout(function(){
									location.href = "userlist.html";
								}, 2000);
							}
							oAlert.style.display = 'block';
							oAlert.innerHTML = obj.message;
						},
						error: function(msg){
							alert(msg);
						}
					})
				}
			}

		</script>
	</head>
	<body>
		<div class = 'container'>
			<div class = 'panel panel-primary' id = 'register'>
				<div class = 'panel-heading'>
					登录
				</div>
				<div class = 'panel-body'>
					<div class = 'form-group'>
						<label for="username">用户名：</label>
						<input type="text" name = 'username' class = 'form-control'>
					</div>
					<div class = 'form-group'>
						<label for="password">密码：</label>
						<input type="text" name = 'password' class = 'form-control'>
					</div>
					<div id = 'alert_info' class = 'alert alert-danger'>xxxxx</div>
					<a href="register.html">马上注册</a>
					<button id = 'btn1' class = 'btn btn-primary pull-right'>登录</button>
				</div>
			</div>
		</div>
	</body>
</html>

2.1 登录页面 login.php

<?php 
	header("Content-type:text/html;charset=utf-8");
	//统一发返回格式
	$responseData = array("code" => 0, "message" => "");
	//取出传过来的数据
	$username = $_POST["username"];
	$password = $_POST["password"];

	//简单的验证
	if(!$username){
		$responseData["code"] = 1;
		$responseData["message"] = "用户名不能为空";
		echo json_encode($responseData);
		exit;
	}
	if(!$password){
		$responseData["code"] = 2;
		$responseData["message"] = "密码不能为空";
		echo json_encode($responseData);
		exit;
	}
	
	//链接数据库
	$link = mysql_connect("localhost", "root", "root");

	//2、判断是否连接成功
	if(!$link){
		echo "链接失败";
		$responseData["code"] = 3;
		$responseData["message"] = "数据库链接失败";
		echo json_encode($responseData);
		exit; //终止后续所有的代码
	}

	//3、设置字符集
	mysql_set_charset("utf8");

	//4、选择数据库
    mysql_select_db("yyy");

    //md5加密
    //  $str = md5(md5(md5($password)."xxx")."yyy");
     
    //5、登录
    $sql1 = "select * from users where username = '{$username}' and password='{$password}'";

	 //6、发送sql语句
	$res = mysql_query($sql1);
	//7、取出一行数据
	$row = mysql_fetch_assoc($res);
	
	if(!$row){
		$responseData["code"] = 4;
		$responseData["message"] = "用户名或者密码错误";
		echo json_encode($responseData);
	}else{
        $responseData["message"] = "登陆成功";
		echo json_encode($responseData);
    }
	mysql_close($link);
 ?>

在这里插入图片描述

在这里插入图片描述

3.1 获取用户列表页面 userlist.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<link rel="stylesheet" href="../css/bootstrap.min.css">
		<link rel="stylesheet" href="../css/buttons.css">
		<script src = '../ajax.js'></script>
		<script src = '../tool.js'></script>
		<script>
			window.onload = function(){
				var oBtn = document.getElementById("btn1");
				var oT1 = document.getElementById("t1");

				oBtn.onclick = function(){
					$ajax({
						method: "get",
						url: "userlist.php",
						success: function(result){
							var arr = JSON.parse(result);
							//通过循环创建节点添加到页面上
							var str = ``;
							for(var i = 0; i < arr.length; i++){
								str += `<tr>
									<td>${arr[i].id}</td>
									<td>${arr[i].username}</td>
									<td>${arr[i].password}</td>
									<td>${showTime(Number(arr[i].create_time))}</td>
									<td id = '${arr[i].id}'>
										<a href = "#">删除</a>
										/
										<a href = "updateStudents.html?id=${arr[i].id}">修改</a>
									</td>
								</tr>`;
							}

							oT1.innerHTML = str;
						},
						error: function(msg){
							alert(msg);
						}
					})
				}


				//给所有的删除按钮和修改按钮添加点击
				oT1.onclick = function(ev){
					var e = ev || window.event;
					var target = e.target || window.event.srcElement;
					if(target.nodeName.toLowerCase() == "a" && target.innerHTML == "删除"){
						//拿到当前要删除的数据的id
						var id = target.parentNode.id;
						$ajax({
								method: "get",
								url: "deleteStudents.php",
								data: {
									id: id
								},
								success: function(result){
									var obj = JSON.parse(result);
									if(!obj.code){
										oT1.removeChild(target.parentNode.parentNode);
									}else{
										alert(obj.message);
									}
								},
								error: function(msg){
									alert(msg)
								}
							})



						return false;
					}
				}
			}
		</script>
	</head>
	<body>
		<div class = 'container'>
			<div class = 'panel panel-primary'>
				<div class = 'panel-heading'>
					<h2>获取用户列表</h2>
				</div>
				<div class = 'panel-body'>
					<button id = 'btn1' class = 'button button-glow button-rounded button-raised button-primary'>获取用户数据</button>
					<br><br>
					<table class = 'table table-bordered  table-hover'>
						<thead>
							<tr>
								<th>用户id</th>
								<th>用户名</th>
								<th>密码</th>
								<th>注册日期</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id = 't1'>
							
						</tbody>
					</table>
				</div>
				<div class = 'panel-footer'></div>
			</div>
		</div>
	</body>
</html>

3.2 获取用户列表页面 userlist.php

<?php 
	header("Content-type:text/html;charset=utf-8");
	//链接数据库
	$link = mysql_connect("localhost", "root", "root");

	//2、判断是否连接成功
	if(!$link){
		echo "数据库链接失败";
		exit; //终止后续所有的代码
	}

	//3、设置字符集
	mysql_set_charset("utf8");

	//4、选择数据库
	mysql_select_db("yyy");

	//5、准备sql
	$sql = "SELECT * FROM users";

	$res = mysql_query($sql);

	$arr = array();

	while($row = mysql_fetch_assoc($res)){
		array_push($arr, $row);
	}

	echo json_encode($arr);

	mysql_close($link);
 ?>

在这里插入图片描述

4. 删除用户页面 deleteStudents.php

<?php 
	//删除操作
	header("Content-type:text/html;charset=utf-8");
	//统一发返回格式
	$responseData = array("code" => 0, "message" => "");

	//删除的数据
	$id = $_GET['id'];

	//1、链接数据库
	$link = mysql_connect("localhost", "root", "root");
	//2、判断是否链接成功
	if(!$link){
		$responseData['code'] = 1;
		$responseData['message'] = "数据库链接失败";
		//返回到前台页面你
		echo json_encode($responseData);
		exit;
	}
	//3、设置字符集
	mysql_set_charset("utf8");

	//4、选择数据库
	mysql_select_db("yyy");

	//5、准备sql语句，通过id删除
	$sql = "DELETE FROM users WHERE id={$id}";

	$res = mysql_query($sql);

	if(!$res){
		$responseData['code'] = 2;
		$responseData['message'] = "删除用户数据失败";
		//返回到前台页面你
		echo json_encode($responseData);
	}else{
		$responseData['message'] = "删除用户数据成功";
		//返回到前台页面你
		echo json_encode($responseData);
	}

	mysql_close($link);

 ?>

在这里插入图片描述

5.1 修改用户页面 updateStudents.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>注册</title>
		<link rel="stylesheet" href="../css/bootstrap.min.css">
		<style>
			#update{width: 400px; margin: 150px auto}
			#alert_info{margin: 2px; padding: 2px;text-align: center; margin-bottom: 10px; display: none}
		</style>
		<script src = '../ajax.js'></script>
		<script>
			window.onload = function(){
				var oBtn = document.getElementById("btn1");
				var oAlert = document.getElementById("alert_info");
				var aInputs = document.getElementsByTagName("input");

				//给提交按钮添加点击
				oBtn.onclick = function(){
					$ajax({
						method: "post",
						url: 'submitStudents.php',
						data: {
							username: aInputs[0].value,
							password: aInputs[1].value,
							id: aInputs[2].value
						},
						success: function(result){
							var obj = JSON.parse(result);
							if(obj.code){
								oAlert.className = 'alert alert-danger';
							}else{
								oAlert.className = 'alert alert-success';
								setTimeout(function(){
									location.href = "userlist.html";
								}, 2000);
							}
							oAlert.style.display = 'block';
							oAlert.innerHTML = obj.message;
						},
						error: function(msg){
							alert(msg);
						}
					})
				}



				var id = valueByName(location.search, "id");

				//发送id到后台php的页面
				$ajax({
					method: "get",
					url: "updateStudents.php",
					data: {
						id: id
					},
					success: function(result){
						var obj = JSON.parse(result);
						if(!obj.code){
							var row = JSON.parse(obj.message);
							aInputs[0].value = row.username;
							aInputs[1].value = row.password;
							aInputs[2].value = row.id;
						}
					},
					error: function(msg){
						alert(msg);
					}
				})

			}




			//name1=value1&name2=value2&name3=value3 提取id值的函数
			function valueByName(search, name){
				var start = search.indexOf(name + "=");
				if(start == -1){
					return null;
				}else{
					var end = search.indexOf("&", start);
					if(end == -1){
						end = search.length;
					}

					//提取出想要键值对 name=value
					var str = search.substring(start, end);
					var arr = str.split("=");
					return arr[1];
				}

			}

		</script>
	</head>
	<body>
		<div class = 'container'>
			<div class = 'panel panel-primary' id = 'update'>
				<div class = 'panel-heading'>
					修改用户数据
				</div>
				<div class = 'panel-body'>
					<div class = 'form-group'>
						<label for="username">用户名：</label>
						<input type="text" name = 'username' class = 'form-control'>
					</div>
					<div class = 'form-group'>
						<label for="password">密码：</label>
						<input type="text" name = 'password' class = 'form-control'>
					</div>
					<div class = 'form-group'>
					<!-- 隐藏表单 -->
						<input type="hidden" name = 'id' class = 'form-control'>
					</div>
					<div id = 'alert_info' class = 'alert alert-danger'>xxxxx</div>
					<a href="userlist.html">查看用户列表</a>
					<button id = 'btn1' class = 'btn btn-primary pull-right'>提交</button>
				</div>
			</div>
		</div>
	</body>
</html>

5.2 修改用户页面 updateStudents.php

<?php 
	header("Content-type:text/html;charset=utf-8");
	//统一发返回格式
	$responseData = array("code" => 0, "message" => "");

	$id = $_GET['id'];

	if(!$id){
		$responseData["code"] = 1;
		$responseData["message"] = "没有要修改数据";
		echo json_encode($responseData);
		exit; //终止后续所有的代码
	}

	//链接数据库
	$link = mysql_connect("localhost", "root", "root");

	//2、判断是否连接成功
	if(!$link){
		
		$responseData["code"] = 2;
		$responseData["message"] = "数据库链接失败";
		echo json_encode($responseData);
		exit; //终止后续所有的代码
	}

	//3、设置字符集
	mysql_set_charset("utf8");

	//4、选择数据库
	mysql_select_db("yyy");

	//5、准备sql从查找数据
	$sql = "SELECT * FROM users WHERE id={$id}";

	$res = mysql_query($sql);

	$row = mysql_fetch_assoc($res);

	if(!$row){
		$responseData["code"] = 3;
		$responseData["message"] = "修改的数据不存在";
		echo json_encode($responseData);
	}else{
		$responseData["message"] = json_encode($row);
		echo json_encode($responseData);
	}

	mysql_close($link);

 ?>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6 修改用户的判断 submitStudents.php

<?php 
	header("Content-type:text/html;charset=utf-8");
	//统一发返回格式
	$responseData = array("code" => 0, "message" => "");
	//取出传过来的数据
	$username = $_POST["username"];
	$password = $_POST['password'];
	$id = $_POST["id"];

	//简单的验证
	if(!$username){
		$responseData["code"] = 1;
		$responseData["message"] = "用户名不能为空";
		echo json_encode($responseData);
		exit;
	}
	if(!$password){
		$responseData["code"] = 2;
		$responseData["message"] = "密码不能为空";
		echo json_encode($responseData);
		exit;
	}
	if(!$id){
		$responseData["code"] = 3;
		$responseData["message"] = "修改的用户不存在";
		echo json_encode($responseData);
		exit;
	}
	
	
	//链接数据库
	$link = mysql_connect("localhost", "root", "root");

	//2、判断是否连接成功
	if(!$link){
		
		$responseData["code"] = 3;
		$responseData["message"] = "数据库链接失败";
		echo json_encode($responseData);
		exit; //终止后续所有的代码
	}

	//3、设置字符集
	mysql_set_charset("utf8");

	//4、选择数据库
	mysql_select_db("yyy");


	//5、判断用户名是否重名
	$sql = "SELECT * FROM users WHERE username='{$username}' AND id!={$id}";

	$res = mysql_query($sql);
	$row = mysql_fetch_assoc($res);
	if($row){
		$responseData["code"] = 4;
		$responseData["message"] = "用户名重名，不能修改";
		echo json_encode($responseData);
		exit; //终止后续所有的代码
	}
	//md5加密
	// $str = md5(md5(md5($password)."xxx")."yyy");
	
	$sql2 = "UPDATE users SET username='{$username}',password='{$password}' WHERE id={$id}";

	$res2 = mysql_query($sql2);
	if($res2){
		$responseData["message"] = "修改成功";
		echo json_encode($responseData);
	}else{
		$responseData["code"] = 5;
		$responseData["message"] = "用户名修改失败，请重试";
		echo json_encode($responseData);
		exit; //终止后续所有的代码
	}
	mysql_close($link);



 ?>

在这里插入图片描述

ajax.js

function $ajax({method = "get",url,data,success,error}){
    //1、创建ajax对象
    var xhr = null;
        try{
            xhr = new XMLHttpRequest();
        }catch(error){
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    //判断如果数据存在
    if(data){
        data = querystring(data);
    }
    if(method == "get" && data){
        url += "?" + data;
    }
    xhr.open(method,url,true);
            
    if(method == "get"){
    xhr.send();
    }else{
    //必须在send方法之前，去设置请求的格式
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    xhr.send(data);
    }
    //4、等待数据响应
           
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
        //判断本次下载的状态码都是多少
            if(xhr.status == 200){
                /*
                如何去处理数据不确定
                回调函数，
                */
                if(success){
                    success(xhr.responseText);
                }
            }else{
                if(error){
                    error("Error:" + xhr.status);
                }
              }
        }
    }
}
//转成字符串函数
function querystring(obj){
    var str ="";
    for (var attr in obj) {
       str += attr + "=" + obj[attr] +"&";
    }
   return  str.substring(0,str.length - 1)
}
OrdnAry
关注
专栏目录
springboot+vue+bootstrap 前后端分离进行数据交互
DUOKILY的博客
11-25 2017
javaweb实验 springboot+vue+bootstrap 前后端分离进行数据交互
php+mysql+bootstrap+jquery实现增删查改的前后端
05-03
PHP+MYSQL入门学习并实现后端增删改查，bootstrap实现后端页面；前端有ajax请求json格式数据，jquery动态创建元素等
bootstrap-table前后端完整交互（后端PageHelper处理分页）
是我的温柔啊
05-31 2332
1、html代码如下 关键的代码是：<table id="userTable"></table> <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> ...
bootstrap + ajax +php 实现 前后端的交互之查询表数据和插入数据
OrdnAry的博客
09-05 718
查询数据的php页面 <?php header('content-type:text/html;charset="utf-8"'); /* 连接数据库 天龙八部 */ /* //1.连接数据库 第一个参数：连接数据库IP 第二个参数：用户名 第三个参数：密码*/ $link = mysql_connect("localhost","root","root");
PHP+Bootstrap+原生Ajax+MySQL实现前后端交互（中）
HJay_Chou的博客
09-21 1613
前后端交互项目修改功能思路修改功能的js代码修改功能的PHP代码实现效果删除功能思路实现删除功能的js代码实现删除功能的PHP代码实现效果 在上个文章中介绍了如何使用bootstrap进行布局，使用PHP操作数据库，通过ajax实现数据的查询和添加功能，在这篇文章中，继续实现ajax交互项目的修改和删除操作。 修改功能 思路 通过点击页面上的修改按钮，将会弹出模态框，并将这一行的信息对应显示在模态...
PHP+Bootstrap+原生Ajax+MySQL实现前后端交互（上）
HJay_Chou的博客
09-21 4105
前后端交互简介实现布局Bootstrap布局代码MySQL数据库实现查询功能添加记录修改记录删除记录 简介 本案例使用Bootstrap进行响应式布局，通过PHP以及MySQL实现前后端交互，使用Ajax技术实现页面的无刷新加载。 实现 布局 布局采用前端框架Bootstrap实现响应式布局，快速、高效。 注：使用Bootstrap布局，需注意，Bootstrap是依赖于JQuery之上的，所以需...
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
08-31
Ajax实现加载页面、删除、查看详细信息 Bootstrap美化页面 Ajax是一种异步请求技术，能够实现加载页面、删除、查看详细信息等...Ajax和Bootstrap可以结合使用来实现加载页面、删除、查看详细信息等功能，并美化页面。
登录与注册界面的实现，同时实现前后端的交互功能
06-26
总结，实现“登录与注册界面的实现，同时实现前后端的交互功能”涉及到了多个IT领域的知识，包括Spring框架、SpringMVC、MyBatis的使用，前端界面设计，以及安全性、异常处理和测试等。这个过程既考验开发者的编码...
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
CSS可以设置颜色、字体、布局和响应式设计等，例如使用`background-color`、`font-size`、`display:flex`等属性。在webdemo-master中，CSS文件可能通过类选择器、ID选择器或伪类来指定特定HTML元素的样式。 ...
bootstrap-table真实交互数据
01-13
这个"bootstrap-table真实交互数据"实例提供了一个完整的解决方案，帮助开发者实现前后台数据的实时交互，无需从头构建相关功能。下面将详细介绍相关知识点。 1. **Bootstrap框架**：Bootstrap是由Twitter开发并...
bootstraptable 前端后端
03-03
springboot 搭建集成了bootstrap_table 的服务端分页demo,有不妥善的地方需要大家提出批评,共同进步
后端 SSM 前端 bootstrap 数据库mysql
09-07
后端 SSM 前端 bootstrap 数据库mysql 开发工具可直接运行
bootstrap模态框之间的数据交互_AI研习丨何晓冬：语言与视觉的跨模态智能
weixin_33829335的博客
12-30 191
转自 CAAI会员中心0 引言本文谈谈我在语言与视觉的跨模态智能研究与产业应用方面的一些思考。在人工智能领域中，模态是指智能体接收和输出信息的特定方式。当前人工智能领域研究的主要模态包括语音、文本、图像、视频等。近30来，计算机及相关技术的高速发展产生了大量的不同模态的信息(语音、文本、图像、视频，以及多样的结构化数据等)，并进而催生出针对不同模态的专业领域研究，例如人类语言技术(Human La...
使用bootstrap-multiselect插件进行前后台数据交互
Fjtd_2019的博客
02-15 857
上一次分享了bootstrap-multiselect插件的一些基本用法，今天想来记下使用该插件的一个实际用途，在公司的项目中，我使用了该插件用于增或者修改某一个对象所关联的属性，由于公司使用的前多选下拉框的中的子项便是我想要关联的子项，那么今天就简单的来分享一下我的思路 首先是对下拉框的一个初始化： $(document).ready(function () { initSelectBox()...
bootstrap后台管理系统前后台实现(含数据库)
热门推荐
pengyufight的博客
07-01 3万+
撰写本文档目的是让后续开发者在理解该系统架构的基础上遵循一定规范保持系统架构的合理性；同时也能够达到允许没有开发经验仅有web基础的入门开发者能够通过复制粘贴的方式仿照demo示例进行开发的目的。 目 录 1 案例调研与选取... 2 1.1 案例调研... 2 1.2 UI选取... 3 2 系统实现... 3 2.1 实...
bootstrap模态框之间的数据交互_Bootstrap 模态框（Modal）插件数据传值
weixin_42559413的博客
02-06 1566
模态框具体代码如下：×修改信息学号：密码：姓名：性别：男女关闭提交更改单击编辑图标时触发模态框，并将此行数据传入模态框。传入后如下：具体传值方法如下//触发模态框的同时调用此方法function editInfo(obj) {var id = $(obj).attr("id");//获取表格中的一行数据var stuno = document.getElementById("table").row...
数据库前后端交互 从后端到前端入门教程二 (Tomcat、MySQL、Bootstrap、JAVA Servlet)
张时贰的博客
12-26 4292
数据库前后端交互 从后端到前端入门教程二 文章目录前言前期准备设计Web测试 前言 分两篇博客，以学生管理系统为例子，实现前后端交互(这里并没有设计完成，重在操作过程！).以下涉及得到一些软件会从安装开始介绍 仅供参考入门学习基本操作，代码部分还是得自己学 #mermaid-svg-QoTUu6sB5iimWdIX .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#
flask+bootstrap+sklearn从零实现机器学习分类模型的前后端交互网页(二): 着陆页的实现--巨幕组件
HYQHYQ111的博客
11-29 2156
在上一篇中已经完成了一个进阶的helloword，实现了flask的基本使用，在本篇会结合bootstrap实现着陆页，包含导航栏、巨幕、按钮和子页面跳转路由的配置 一、本章内容概述: 在本章中，复现我实现的过程，一开始我看中了bootstrap的巨幕组件，觉得挺好看，就想用用。我计划完成3个页面(不算上...
bootstrap Table 后台交互
lfy1114的博客
05-31 1万+
bootstrap Table 后台交互 table th对应的字段和实体相对应，bootstrap能自动封装。 <div id="applyLog" style="z-index: 1000000019; display: none; width: 750px; height: 300px; overflow: auto; position: absolute; left: 50%; margin
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值