前后端的简单交互

最新推荐文章于 2024-08-18 19:27:11 发布

楠大人哦

最新推荐文章于 2024-08-18 19:27:11 发布

阅读量619

点赞数 1

文章标签：交互 html javascript jquery

本文链接：https://blog.csdn.net/qq_45841224/article/details/122262467

版权

本文通过创建一个不连接数据库的登录页面，介绍了前后端交互的基本流程。使用eclipse建立Dynamic Web Project，创建HTML文件，并利用jQuery库进行前端交互。在HTML中引用jQuery库，设置按钮点击事件，并通过jQuery的ajax方法与后端Servlet进行数据交换，解决了字符编码问题。

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

以运用eclipse为例，简单介绍一下它的网页项目

创建一个Dynamic Web Project 在他的 WebContent 文件夹里面新建一个 html文件，可以进行任意命名，新建之后大概是如下界面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

我们来做一个，不连接数据库的登录页面来初步了解

首先，做一个登陆页面，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 账号：<input type="text" ><br><br>//<br>是换行符
 密码：<input type="text" ><br><br>
 <input type="text" value="登录">
</body>
</html>

当然只写这个实现不了前后端的交互还需要jquery 是一个javaScript的库具体可以查看jquery菜鸟教程本质就是对一些功能可以直接调用函数来实现很简单也很方便

使用jquery 首先需要使用script 标签进行一个地址引用里面是一个 js文件

引用地址有多个

要把script标签放在 head里面为了方便也可以把对应网站链接的 js文件复制到自己的软件里面同时可以提高安全性，因为不用访问外部网站，总是会安全些。

我们来给 button添加一个点击事件当我们点击登录按钮的时候进行一次弹窗

这是要用到 jquery的基础语句$(selector).action()

在这之前需要给 button 添加一个类class 标签或者 id 标签，能够让我们精确的找到他

这是代码