学生想搭建网站怎么做,一诺网站建设,智林东莞网站建设公司,项目网络计划软件教程异步需要有一个js中转
前后端数据互通流程: 建立jsp文件#xff0c;连接js文件#xff0c;在js文件中设置传入后端的值与使用方法#xff08;get#xff0c;post#xff09;#xff0c;后端执行完代码后 将值返回给js#xff0c;js接收后返回给jsp#xff1b;
界面跳…异步需要有一个js中转
前后端数据互通流程: 建立jsp文件连接js文件在js文件中设置传入后端的值与使用方法getpost后端执行完代码后 将值返回给jsjs接收后返回给jsp
界面跳转流程表单被提交后根据设置传入后端的值与使用方法getpost在对应的servlet中调用对应的方法并 进行逻辑判断和设置跳转业面的属性的初始值后跳转新的界面 1.jsp文件 与html 写法一样 Created by IntelliJ IDEA.User: 21647Date: 2023/9/14Time: 10:05To change this template use File | Settings | File Templates.
--%% page contentTypetext/html;charsetUTF-8 languagejava %
%--
jsp业面分为两个部分模块数据元素
模块数据jsp业面里的HTML代码内容是固定的
元素jsp里面的java部分
jspjavahtml
--%
html
headtitleTitle/title
/head
body
h1登录页面/h1
%-- action 地址--%
%--method 提交方式默认 get 执行哪个方法--%
form action../ServletUserLogin methodpost
divlabel username:/label
%-- name一定要写否则报错 ServletUserLogin 只有加了name属性的标签元素才会提交到服务器--%input typetext nameusername idusername
%-- 返回用户名是否存在--%span idusernameGet/span/divdivlabel password/labelinput typepassword namepassword idpasswordspan idpasswordGet/span/divbrinput typesubmit value提交/form/body
%-- 链接js--%
script src../ajax/loginAjax.js/script
%--script src../ajax/hasYongHu.js/script--%
script src../ajax/passAjax.js/script
/html
2. jsp的js文件 从前端往后端传入值 并将后端返回值返回给前端
//ajax 异步请求对象
var xmlhttp_password;//通过id返回元素节点
function $$(id) {return document.getElementById(id);
}//当用户名输入失去焦点
$$(password).οnblurajaxGetMethod;function ajaxGetMethod() {console.log(wnm);// 1.创建异步对象// 解决浏览器兼容问题if(window.XMLHttpRequest){xmlhttp_passwordnew XMLHttpRequest();}else {xmlhttp_passwordnew ActiveXObject(Microsoft.XMLHTTP);}// 2. url 纯地址 保留?号var url/ServletLG/ServletLogin_nam_password? ;//参数列表var param name $$(username).valuepassword$$(password).valuetimenew Date().getTime() ; //通过时间戳欺骗浏览器发送新的请求,// 2.解决乱码// post 给 参数列表解决paramencodeURI(param,utf-8);// console.log(url);// 3.设置回调函数xmlhttp_password.onreadystatechange callbackGet_password;// 4.设置请求类型
// true 异步请求局部刷新xmlhttp_password.open(post,url,true);
// 设置请求头信息xmlhttp_password.setRequestHeader(Content-type,application/x-www-form-urlencoded);// 5.将请求发送到服务器 send 传参数xmlhttp_password.send(param);
//
}function callbackGet_password(){
// 处理返回后的数据是否成功 后端到前端
// 1.状态码if(xmlhttp_password.status 200 xmlhttp_password.readyState4){//获得返回的值var infoxmlhttp_password.responseText;$$(passwordGet).innerTextinfo;}// xmlhttp.status 请求状态200 结果请求成功
// 202 请求接收但未处理完
// 400 错误的请求
// 404 地址错误
// 500 代码错误
// xmlhttp.readyState 异步请求状态 0 尚未初期化
// 1 正在加载
// 2 加载完成
// 3 正在处理
// 4处理完成
}
3.servlet 文件 分为 get post文件 get WebServlet(name ServletLogin_nam_password ,value/ServletLogin_nam_password)public class ServletLogin_nam_password extends HttpServlet {// 局部刷新 agaxprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接收 前端的数据 request.getParameter(name) name 是在loginAjax拼接url参数列表中的nameString namerequest.getParameter(name);String passwordrequest.getParameter(password);
// 解码name URLDecoder.decode(name,utf-8);password URLDecoder.decode(password,utf-8);System.out.println(password);// 防止回传数据乱码 在发送数据前写
// response.setContentType(text/html;charsetUTF-8);UserDao udnew UserDao();// System.out.println(ud.hasName(name));
// 防止回传数据乱码 在发送数据前写response.setContentType(text/html;charsetUTF-8);//向前端发送数据PrintWriter out1response.getWriter();if(ud.hasYonghu(name,password)){out1.print(密码存在);}else {out1.print(密码不存在);}
//} post protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//接收 前端的数据 request.getParameter(name) name 是在loginAjax拼接url参数列表中的nameString namerequest.getParameter(name);String passwordrequest.getParameter(password);
// 解码name URLDecoder.decode(name,utf-8);password URLDecoder.decode(password,utf-8);System.out.println(password);// 防止回传数据乱码 在发送数据前写
// response.setContentType(text/html;charsetUTF-8);UserDao udnew UserDao();// System.out.println(ud.hasName(name));
// 防止回传数据乱码 在发送数据前写response.setContentType(text/html;charsetUTF-8);//向前端发送数据PrintWriter out1response.getWriter();if(ud.hasYonghu(name,password)){out1.print(密码存在);}else {out1.print(密码不存在);}
//}
4.当表单被提交后 执行../ServletUserLogin 的servlet protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// post 和 get 的区别
// 1。get请求地址栏携带了参数,post请求只有地址没有参数
// 2.get请求参数暴露 不安全post请求参数隐藏 安全
// 3.get请求携带的最大数据8k不如post请求String usernamerequest.getParameter(username);String passwordrequest.getParameter(password);username URLDecoder.decode(username,utf-8);password URLDecoder.decode(password,utf-8);System.out.println(usernameaaapassword);System.out.println(Post);UserDao udnew UserDao();StockDao sdnew StockDao();ListStock ls2sd.getFenYe(3,1);System.out.println(ls2);request.getSession().setAttribute(stocklist,ls2);if(ud.hasYonghu(username,password)){
// 成功
// 请求转发一次请求 地址栏不变// http://localhost:8080/ServletLG/ServletUserLogin// 跳转之前 将数据库 stock 仓库 数据放入list中request.getRequestDispatcher(/jsp/denglutrue.jsp).forward(request,response);}else {
//失败
// 重定向 两次请求 前端-》servlet 地址栏变化
// http://localhost:8080/ServletLG/jsp/denglufalse.jspresponse.sendRedirect(/ServletLG/jsp/denglufalse.jsp);}}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 从name 属性获取String usernamerequest.getParameter(username);String passwordrequest.getParameter(password);System.out.println(text);username URLDecoder.decode(username,utf-8);password URLDecoder.decode(password,utf-8);UserDao udnew UserDao();if(ud.hasYonghu(username,password)){
// 成功
// 请求转发一次请求 地址栏不变
//http://localhost:8080/ServletLG/ServletUserLogin?usernameaapasswordaa123StockDao sdnew StockDao();ListStock ls2sd.getFenYe(3,1);System.out.println(ls2);request.getSession().setAttribute(stocklist,ls2);request.getRequestDispatcher(/jsp/denglutrue.jsp).forward(request,response);}else {
//失败
// 重定向 两次请求 前端-》servlet 重后端往前端 地址栏变化response.sendRedirect(/ServletLG/jsp/denglufalse.jsp);}}
