目录
🌈2、后端代码：Calculator_form.java文件
🌈2、后端代码：Calculator_ajax.java文件
一、方式1：使用form表单的形式（不推荐）
🌈1、前端代码：HTML文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算器-form表单提交</title>
</head>
<body>
<form method="get" action="calculator">
<div style="margin-top:50Px;margin-left:40%">
<h2>计算器</h2>
<!-- id是给js用的，name是form表单提交时给后端用得，等于后端的key值-->
数值1: <input id="num1" name = "num1"><p></p>
数值2: <input id="num2" name = "num2"><p></p>
<!-- submit是给form表单用的,ajax用button-->
<input type = "submit" value="相加">
</div>
</form>
</body>
</html>🌈2、后端代码：Calculator_form.java文件
//2、创建路由
@WebServlet("/calculator_form")
//1、创建类，继承HttpServlet
public class Calculator_form extends HttpServlet {
/**
* 目标：从前端拿两个参数：num1和num2，进行相加操作并将结果返回给前端
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
//生成doPost或者doGet方法
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
//重写doPost方法
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//0、设置返回的数据类型和编码
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=utf-8");
//1、从请求req中获取参数num1
String num1 = req.getParameter("num1");
String num2 = req.getParameter("num2");
//2、参数的合法性校验
if(num1==null || num1.equals("") || num2==null || num2.equals("")){
//直接返回错误信息
resp.getWriter().write("抱歉，参数有误");
return;
}
//3、进行类型转换String-int
int number1 = Integer.valueOf(num1);
int number2 = Integer.valueOf(num2);
//4、计算相加的结果
int res = number1+number2;
//5、将计算结果返回给前端
resp.getWriter().write("相加结果："+res);
}
}注意：
（1）前端代码中，id是给js用的，name是form表单提交时给后端用得，要设置name属性。
（2）后端代码中：设置的编码格式是html
🌈3、最终效果
运行代码，获取URL地址，在网页打开.html文件地址
方式1：存在问题：
计算完之后，不能再进行下一次操作了，因为采用的是form表单的提交，form表单的提交是全部提交，将之前的页面一起提交了，只能计算一次，因此并不适用现实，实际中我们采用的是局部提交的技术，也就是ajax技术，见方式2。
方式2目标：
方式1点击提交之后，将结果显示在按钮下方，页面保持不变，方便进行下一次操作。
二、方式2：使用ajax形式（最常用&&重点！！！）
🌈1、前端代码：HTML文件
这里使用jQuery的方式，因此首先要将jQuery引入到html文件中。
jQuery有一个方法叫ajax，当获取到数值不为空的时候，就发送ajax到后端，前端与后端实现交互，就是 ajax实现。因此我要在ajax方法里面设置：我要提交到哪个URL里面?我要传递的参数是什么？最后返回了结果我要怎么去处理这个结果?因为是多个值，所以使用json的形式来传递，用{}实现。
🍈 最终完整html文件代码如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>计算器-ajax局部提交</title> <!-- 使用jquery方式进行ajax --> <!-- 在当前项目中引入jquery--> <script src = "jquery.min.js"></script> </head> <body> <div style="margin-top:50Px;margin-left:40%"> <h2>计算器</h2> <!-- id是给js用的，name是form表单提交时给后端用得，等于后端的key值--> 数值1:<input id="num1" name = "num1"><p></p> 数值2:<input id="num2" name = "num2"><p></p> <!-- submit是给form表单用的,ajax用button--> <!-- -------------------显示函数没有被定义-----------------------执行并不成功--> <input type = "button" value="相加" onclick="mysub()"> </div> <script> // 实现按钮的函数 function mysub(){ //1、获取控件，进行非空校验 var num1 = jQuery("#num1"); var num2 = jQuery("#num2"); //2、非空校验 //没有输入任何信息 if(num1.val().trim() == ""){//.trim()是去空格 alert("抱歉，请先输入数值！"); num1.focus(); return false; } if(num2.val().trim() == ""){ alert("抱歉，请先输入数值！"); num1.focus(); return false; } //3、发送ajax到后端:ajax是一个方法 //需要设置：我要提交到哪个URL里面，我要传递的参数是什么，还有最终返回结果了我要怎么取处理。 //多个值，所以用Json格式实现 jQuery.ajax({ url:"calculator_ajax",//请求地址 method:"get",//请求方法类型--大小写都可以 data:{//请求数据 "num1":num1.val(), "num2":num2.val() }, //success是一个方法，前面三个都是属性；这个方法接收了一个返回的参数， //返回的参数用res对象接收(名字是什么无所谓，反正是后端返回给前端的一个参数) success:function(res){ //规定后端发送给前端的是一个Json格式的数据{"code":200,"msg":"描述","data":xxx} if(res.code == 200 && res.data == 1){ alert("计算的结果是："+res.data); }else{ alert("操作失败！"+res.msg); } } }); } </script> </body> </html>
🌈2、后端代码：Calculator_ajax.java文件
注意点1：URL要对应
注意点2：编码格式
注意点3：学会Json的简单使用：objectMapper
(下面用的HashMap，乱序，但不影响结果，只要最后有着三个属性值就好了；如果要保证有序性，用LinkedHashMap就行)。
🍈最终后端代码实现：Calculator_ajax.java文件
import com.fasterxml.jackson.databind.ObjectMapper; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.HashMap; import java.util.LinkedHashMap; /** * ajax版本 */ @WebServlet("/calculator_ajax") public class Calculator_ajax extends HttpServlet { //定义成类属性，且不能被修改 private final ObjectMapper objectMapper = new ObjectMapper(); @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req,resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //-------------------------与form形式的不同点1-------------------------- //0、设置返回的数据类型和编码：设置为json格式 req.setCharacterEncoding("UTF-8"); resp.setContentType("application/json;charset=utf-8"); //1、从请求req中获取参数num1 String num1 = req.getParameter("num1"); String num2 = req.getParameter("num2"); //2、参数的合法性校验 if(num1==null || num1.equals("") || num2==null || num2.equals("")){ //直接返回错误信息 resp.getWriter().write("抱歉，参数有误"); } //3、进行类型转换String-int int number1 = Integer.valueOf(num1); int number2 = Integer.valueOf(num2); //4、计算相加的结果 int res = number1+number2; //---------------与form形式的不同点2----------------------- //5、返回json格式的对象 //方式1：直接拼:要使用转义字符(不推荐，容易出错) // String jsonRes = "{\"code\":200, \"msg\":\"\", \"data\":"+res+"}"; // resp.getWriter().write(jsonRes); //方式2：json工具：将一个字符串转为对象，或者将一个对象转为json字符串 LinkedHashMap<String,Object> map = new LinkedHashMap<String, Object>(); map.put("code",200); map.put("msg","成功"); map.put("data",res); //返回结果 String jsonStr = objectMapper.writeValueAsString(map); resp.getWriter().write(jsonStr); } }
🌈3、最终效果
注意：如果出错了，F12打开控制台看报错信息。
然后，我们也可以对上述操作用Fiddler进行抓包观察，同样结果显示是12。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
