一个用ajax实现的简易的新闻系统

最新推荐文章于 2021-08-06 17:54:43 发布

wulala_SpongeBob

最新推荐文章于 2021-08-06 17:54:43 发布

阅读量592

点赞数 1

分类专栏：后端开发文章标签：数据库 web ajax jquery

本文链接：https://blog.csdn.net/wulala_SpongeBob/article/details/105479075

版权

这篇博客介绍如何利用jQuery和Ajax技术构建一个简单的新闻系统。首先确保jQuery库安装并配置正确，接着展示了如何从数据库读取数据。博客内容包括数据库结构（新闻、栏目、用户表）的设计，以及登录界面的HTML、CSS和Java代码实现，登陆成功后跳转到主界面。

摘要由CSDN通过智能技术生成

首先要安装好jQuery,比较方便，然后是安装好这两个东西（注意要在对应的页面对应好路径）
在这里插入图片描述
这是用于读取数据库的操作

实现的效果大概是这个样子：
在这里插入图片描述
下面是数据库的定义（我定义的比较简单）：
新闻:

栏目：

用户：

下面是代码：
1、登陆界面：（图片自己设路径）
效果如下：

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="source/css/style.css">
    <title>Land</title>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="source/layer/layer.js"></script>
</head>
<body>
    <div class="whole">
        <p class="top">    
                Please Enter Your New Password
        </p>
        <div class="input">
            <div>
                Your Account
            </div>
            <input type="text" value="" placeholder="用户名/电话号" name="username" ID="username"/>
        </div>
        <div class="input">
            <div>
                New Password
            </div>
            <input type="text" value="" placeholder="密码" name="password" ID="password">
        </div>
            <input type="button" id="but" value="Finsh">
    </div>
<script>
$(function(){
   
	var win_height=$(window).height();
	var who_height=$('.whole').height();
	$('.whole').animate({
   'top':win_height/2-20+'px'},100);
	$(window).on('resize',function(){
   
		var win_height=$(window).height();
		var who_height=$('.whole').height();
		$('.whole').animate({
   'top':win_height/2-20+'px'},100);
	});
	
	$("#but").click(function(){
   
		var name=$("#username").val();
		var pwd=$("#password").val();
		$.ajax({
   
			url:"/web2/DemoServlet",
			async:true,
			type:"post",
			data:{
   
				"action":"denglu",
				"username":name,
				"pwd":pwd
			},
			success:function(data){
   
				console.log(typeof data);
				console.log(data);
				data2=data.data;
				if(data.code==200&&data2.length!=0){
   
					 window.location.href="http://localhost:8080/web2/oneFile.html";
				}
				else{
   
					layer.msg('密码或用户名错误。。。', function(){
   
						});
				}
			},
			error:function(error){
   
				alert("登陆错误")
			}
		})
	})
})
</script>
</body>
</html>

css:

*{
   
    margin:0;
    padding:0;
}
body{
   
    background-image: url("../img/denglu.jpg");
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}
.whole{
   
    /* 涓�鑸笉瑕佽缃珮 */
    width: 30%;
    min-width: 300px;
    margin: auto;
    margin-top:150px ;
    /* position: center; */
    /* top: 30%; */
    background-color: white;
    opacity: 0.7;
    padding-bottom: 2px;
}
.top{
   
    height:40px;
    margin:auto;
    font-size:16px;
    text-align: center;
    line-height:40px;
    background: linear-gradient(to left,red,blue);
}
.input{
   
    margin: 10px;
}
.input div{
   
    font-size: 16px;
    color: rgb(112, 205, 241);
    text-align: center;
    line-height:20px;
}
.input input{
   
    margin-top: 10px;
    width:84%;
    height: 32px;
    /* (100-84)/2 */
    margin-left: 8%;
    border-width:1px;
    border:1px solid black;
    outline:none;
    text-indent:10px;
    color:rgb(17, 16, 16);
}
/* , */
.input input:hover{
   
    box-shadow: 2px 2px 2px rgb(158, 154, 154);
}

#but{
   
	width: 84%;
    margin:30px auto;
    height: 40px;
    text-align: center;
    background: linear-gradient(to left,red,blue);
    font-size: 16px;
    color: white;
    text-decoration: none;
    display: block;
    line-height: 40px;
    border: 0;
    background-color: transparent;
    outline: none;
}
#but:hover{
   
    box-shadow:2px 2px wpx black;
}

2、登陆界面要链接好数据库，登陆成功后转到主界面

html:

<!DOCTYPE html

最低0.47元/天解锁文章

wulala_SpongeBob

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
一个用ajax实现的简易的新闻系统

首先要安装好jQuery,比较方便，然后是安装好这两个东西（注意要在对应的页面对应好路径）这是用于读取数据库的操作实现的效果大概是这个样子：下面是数据库的定义（我定义的比较简单）：新闻:栏目：用户：下面是代码：1、登陆界面：（图片自己设路径）效果如下：html:<!DOCTYPE html><html lang="en"><hea...
复制链接

扫一扫

专栏目录