动态wed 实现前端 jquery,ajax 连接后端 servlet ，没有连数据库

阿A轲

2024-04-16 帮助1人

html 和 js :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://libs.百度.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
姓名：<input type="text" id="username"/> <br/>
密码：<input type="text" id="password"/> <br/>
<input type="button" value="提交" onclick="get()"/> <br/>
</body>
<script>
//js
function get(){
//首先获取文本框中的数据
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
type:"get", // doGet方法当中 post:doPost
url:"http://localhost:8080/WeiYangServlet/MYFirstServlet",
data:{"username":username,"password":password}, //所要提叫的数据
success:function(data){ //数据从后面的servlet往前台传
console.log(data);
console.log(data.code);
console.log(data.message);
}
});
}
</script>
</html>

先引入jquery：

有了jQuery，才能用ajax 进行数据的提交。

-----------

学新通两个输入框，定义 id 选择器

学新通 onclick 点击事件执行 <script> 标签中的 get() 方法;

学新通获取输入框中的数据，分别封装到username 和 password中，

----------

学新通

type中是 get 则执行 servlet 中 doGet方法如果是post 则执行 doPost 方法。一般连到数据库时，对数据的查找遍历在 doGet，对数据进行增删改在doPost。现在没有连数据库，在doGet就行。

url 写的是servlet 的文件位置，这里是 http：//本机ip地址：（端口号） 8080 /项目名/servlet 名

data{}：向后端提交的数据，引号中是向后端传的key值

学新通这个data是后端返回的json数据 console.log ( ) 打印

servlet：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println(username " " password);
response.setContentType("text/json;charset=utf-8");
response.setCharacterEncoding("utf-8");
String json = "{\"code\":\"200\",\"message\":\"成功\"}";
response.getWriter().append(json);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}

-----

学新通接收前端数据

浏览器解析了浏览器页面，把HTML代码解析成图形化格式，把数据传输到servlet中去，数据类型是json数据类型。学新通

json数据格式：key：value （例：name : 张三用name就可以把张三代表出来）

json对象 {“ name”:"张三" } 对象指向是一种实体。

学新通斜杠为转义字符。在文本写好后，粘贴到编译器中会自动加上。

学新通数据返回给前端。避免字符集出错。

这篇好文章是转载于：学新通技术网

动态wed 实现前端 jquery,ajax 连接后端 servlet ，没有连数据库

html 和 js :

servlet：

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开

动态wed 实现 前端 jquery,ajax 连接 后端 servlet ，没有连 数据库

html 和 js :

servlet：

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开

动态wed 实现前端 jquery,ajax 连接后端 servlet ，没有连数据库