eclipse创建好html文件和servlet之后得到如下页面

前端html

1.首先在html引入Jquery,把下面的代码插入head标签

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> 

2.之后编写我们前端html内容,在body标签编写一下内容

	用户名<input id="username" type="text" name="username"/><br/>
	&lt;input type="button" value="提交" onclick="getInput()"/&gt;<!--设置点击事件点击提交按钮触发getInput()方法(函数)--&gt;

预计效果

3.在script标签内编写getInput()方法

    function getInput(){
		var username=$("username").val();/*Jquery语句,
		等价于js中的document.getElementById("username").value;*/
		$.ajax({
			type:"get",//get我们执行的是获取
			url:"http://localhost:8080/ServletProject/myServlet",//数据传输路径,就是servlet路径
			data:{"username":username},//要传输数据内容,注意ajax传输json类型数据
			success:function(value){
				
			}
		});
	}

        这里有必要了解一下jsonjsonajax数据传输的载体。

4.整体页面如下

完成前端内容编写

 后端servlet

1.我们要想接收前端传输过来的数据,那么在doGet方法中进行操作通过以下内容可以接收到从前端传输过来的数据打印出来。

String username=request.getParameter("username");
/*request.getParameter里面参数要与ajax里面data:{key:value}中的key保持一致*/
System.out.println(username);

2.要想向前端返回数据,那么对response进行操作通过以下操作可以数据传回前端

response.setCharacterEncoding("utf-8");//数据编码格式设置
response.setContentType("application/json;charset=utf-8");
String data="{"message":"传输成功"}";
//我们要传输的数据,因为ajaxjson作为数据传输载体,所以我们返回的数据也是json类型的
response.getWriter().append(data);

前端也加上如下内容显示servlet传回来的数据。

console.log(value.message);

3.前端html代码如下

 4.后端servlet代码如下

 5.编写完代码之后右建点击html空白处,选择Run As->1 Run on Server->Next->Finish启动项目

6.选中出现的一串儿路径,在浏览器打开

7.在浏览器中进行测试查看返回值。 

原文地址:https://blog.csdn.net/weixin_46899412/article/details/122356866

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_29374.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注