jQuery-ajax-Ajax()方法和Servlet交互实例

最新推荐文章于 2022-03-09 21:43:59 发布

青衫旧路

最新推荐文章于 2022-03-09 21:43:59 发布

阅读量279

点赞数

分类专栏：前端 jQuery JavaScript 文章标签： jquery html5 ajax javascript servlet

本文链接：https://blog.youkuaiyun.com/weixin_45948996/article/details/103910531

版权

前端同时被 3 个专栏收录

13 篇文章

订阅专栏

JavaScript

7 篇文章

订阅专栏

jQuery

1 篇文章

订阅专栏

本文详细介绍了一个从前端收集用户输入，通过Ajax技术发送至后端处理，并将处理结果返回前端显示的完整流程。涉及的技术包括HTML表单元素、jQuery库、Ajax请求、Servlet后端处理及响应数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端部分：

first:<input type="text" id="first">
first3:<input type="text" id="first3">
<button onclick="btn()">提交</button>
first1:<input type="text" name="first1" id="result">

js部分：

function btn(){
	$.ajax({
		type:"post",
		url:"servlet/indexservlet",
		data:{"first":$("#first").val(),"first3":$("#first3").val()},
		async:true,
		success:function(result){
			$("#result").val(result);
		}
	});
}

Servlet部分：

response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		String first = request.getParameter("first");
		String first3 = request.getParameter("first3");
		String result = first+first3;
		System.out.println(first3+first);
		out.print(result);

运行效果：
在这里插入图片描述