潮州网站网站建设,查询注册过的网站,免费做链接的app有哪些,学校网站建设说明材料目录
一、方式1#xff1a;使用form表单的形式#xff08;不推荐#xff09;
#x1f308;1、前端代码#xff1a;HTML文件
#x1f308;2、后端代码#xff1a;Calculator_form.java文件
#x1f308;3、最终效果
二、方式2#xff1a;使用ajax形式#xff08;…目录
一、方式1使用form表单的形式不推荐
1、前端代码HTML文件
2、后端代码Calculator_form.java文件
3、最终效果
二、方式2使用ajax形式最常用重点
1、前端代码HTML文件
2、后端代码Calculator_ajax.java文件
3、最终效果 一、方式1使用form表单的形式不推荐
1、前端代码HTML文件
!doctype html
html langen
headmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitle计算器-form表单提交/title
/head
bodyform methodget actioncalculatordiv stylemargin-top:50Px;margin-left:40%h2计算器/h2!-- id是给js用的name是form表单提交时给后端用得等于后端的key值--数值1: input idnum1 name num1p/p数值2: input idnum2 name num2p/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方法Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}//重写doPost方法Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//0、设置返回的数据类型和编码req.setCharacterEncoding(UTF-8);resp.setContentType(text/html;charsetutf-8);//1、从请求req中获取参数num1String num1 req.getParameter(num1);String num2 req.getParameter(num2);//2、参数的合法性校验if(num1null || num1.equals() || num2null || num2.equals()){//直接返回错误信息resp.getWriter().write(抱歉参数有误);return;}//3、进行类型转换String-intint number1 Integer.valueOf(num1);int number2 Integer.valueOf(num2);//4、计算相加的结果int res number1number2;//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 langen
headmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitle计算器-ajax局部提交/title!-- 使用jquery方式进行ajax --!-- 在当前项目中引入jquery--script src jquery.min.js/script
/head
bodydiv stylemargin-top:50Px;margin-left:40%h2计算器/h2!-- id是给js用的name是form表单提交时给后端用得等于后端的key值--数值1:input idnum1 name num1p/p数值2:input idnum2 name num2p/p!-- submit是给form表单用的,ajax用button--!-- -------------------显示函数没有被定义-----------------------执行并不成功--input type button value相加 onclickmysub()/divscript// 实现按钮的函数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文件 注意点1URL要对应 注意点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();Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req,resp);}Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//-------------------------与form形式的不同点1--------------------------//0、设置返回的数据类型和编码设置为json格式req.setCharacterEncoding(UTF-8);resp.setContentType(application/json;charsetutf-8);//1、从请求req中获取参数num1String num1 req.getParameter(num1);String num2 req.getParameter(num2);//2、参数的合法性校验if(num1null || num1.equals() || num2null || num2.equals()){//直接返回错误信息resp.getWriter().write(抱歉参数有误);}//3、进行类型转换String-intint number1 Integer.valueOf(num1);int number2 Integer.valueOf(num2);//4、计算相加的结果int res number1number2;//---------------与form形式的不同点2-----------------------//5、返回json格式的对象//方式1直接拼:要使用转义字符(不推荐容易出错)
// String jsonRes {\code\:200, \msg\:\\, \data\:res};
// resp.getWriter().write(jsonRes);//方式2json工具将一个字符串转为对象或者将一个对象转为json字符串LinkedHashMapString,Object map new LinkedHashMapString, 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。
