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

最新推荐文章于 2022-06-06 13:09:32 发布

阿A轲

最新推荐文章于 2022-06-06 13:09:32 发布

阅读量963

点赞数

文章标签：前端 jquery ajax

本文链接：https://blog.csdn.net/qq_57381370/article/details/123374460

版权

html 和 js :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://libs.baidu.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”:"张三" } 对象指向是一种实体。

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

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

阿A轲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态wed 简单实现前端 jquery,ajax 连接后端 servlet ，没有连数据库

html 和 js :先引入jquery：<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>有了jQuery，才能用ajax 进行数据的提交。-----------两个输入框，定义 id 选择器onclick 点击事件执行 <script> 标签中的 get() 方法;获取...
复制链接

扫一扫