web开发中前端页面是如何跟后端服务器数据交互的

article/2025/8/27 0:24:54

后端服务器一般是指servlet容器,用于执行java源程序

常见的网页有html,htm,shtml,asp,aspx,php,jsp等格式
前两个常用于静态网页,后面几个常用于动态网页。

这里前端网页以比较常见的 xx.html 和 xx.jsp 网页作为介绍,其它类似

一、静态页面xx.html如何跟后台交互:

  • 先来看一个最简单的登陆界面源代码
  •   <body>
        <form action="loginServlet" method="post">
           user:<input type="text" name="username"/>
           password:<input type="password" name="password"/>
          
           <input type="submit" value="Submit"/>
        </form>
      </body>
  • 这是一个表单,我们看到里面都是纯html内容,这是一个静态页面,当我们点击submit按钮时候,浏览器会提交表单内的数据到服务器的loginServlet这个相对地址,我们看看浏览器的地址变成啥了:
  • 这不就是我们的后台servlet的地址嘛,然后这个地址指向的是loginServlet这个servlet,然后在web.xml文件中找到这个servlet关联的java类,从而执行了服务器端的程序(第一次执行,那么会实例化,然后执行里面init()函数,然后执行service()函数,如果是第二次调用,那么不用实例化了,直接执行service()函数),我们来看看服务器端的源程序:
  • package com.atguigu.javaweb;

    import java.io.IOException;
    import java.io.PrintWriter;

    import javax.servlet.Servlet;
    import javax.servlet.ServletConfig;
    import javax.servlet.ServletContext;
    import javax.servlet.ServletException;
    import javax.servlet.ServletRequest;
    import javax.servlet.ServletResponse;
    import javax.servlet.http.HttpServletRequest;

    public class loginServlet extends MyGeneriServlet {
        public void init(javax.servlet.ServletConfig config) throws ServletException{
            super.init(config);
        }
        public void service(ServletRequest request, ServletResponse response)
                throws ServletException, IOException {
            //获取请求方式是GET,POST方式?
            HttpServletRequest httpServletRequest=(HttpServletRequest) request;
            String method=httpServletRequest.getMethod();
            System.out.println(method);
            //1.获取请求参数:username,password
            String username=request.getParameter("username");
            String password=request.getParameter("password");
            //获取请求参数
            String initUser=getServletContext().getInitParameter("user");
            String initpassword=getServletContext().getInitParameter("password");
             
            PrintWriter out=response.getWriter();
            //3.对比
            if(initUser.equals(username)&&initpassword.equals(password)){
                out.print("Hello"+username);    // 生成html内容
            }else{
                out.print("Sorry"+username);    // 生成html内容
            }
        }
    }
    上面没有判断此时对servlet的请求是post还是get方法,不过没关系,request这个传进来的参数以及包含了这些信息,自己判断一下执行相应的操作即可

  • 由于页面路径已经跳转到servlet了,但是servlet不是一个.html文件啊,那岂不是没有内容供浏览器显示了,不是的,我们看到返回的参数response中的对象PrintWriter out用于动态生成html内容的字符串"Hello",所以这时候相当于servlet这个路径也有了html内容了,浏览器的页面就会显示上述字符串了

  • 二、jsp页面如何跟后端服务器交互:

  • jsp网页文件就是html内容里面插入java代码,当我们访问.jsp网页文件时候,服务器提前已经知道这个页面内含有java代码,那么服务器这边就得先执行一下这些代码(就跟执行servlet的java源代码一样),同时把执行的结果嵌入在当前这个.jsp页面内,我们看看源代码:

  • <%@page import="java.util.Date"%>     // 如果这个.jsp页面中用到了一些java函数,就得导入库,这就跟java源文件一样的

  • <html>
        <head>
               <title>第一个 JSP 程序</title>
        </head>
        <body>
               <%
                      out.println("Hello World!"); // 这里实际上是服务器执行了结果,然后以文本返回给浏览器进行显示
               %>

        </body>
    </html>

  • 上面红色代码就是java代码,刚刚说过对象PrintWriter out用于动态生成html内容的字符串,所以服务器执行完嵌入在里面的java代码后,就是动态生成了一串html代码,然后一起传给客户端浏览器进行显示

  • 当然这种情况.jsp里面没有按钮,表单这样的控件,现在再来看看有表单这种.jsp如何跟后端交互:

  • view.jsp

  • <%@page import="day03_student.Student"%>  // 还是得带入java用到的库文件

  • <style type="text/css">  // 样式设计部分,即css

  • table{

  • border:1px solid gray;

  • border-collapse:collapse;

  • width:50%

  • }

  • td{

  • border:1px solid gray;

  • }

  • </style>

  • <body>
        <h2>学生个人基本信息</h2>
       <table>
       <tr>
        <td>编号</td>
        <td>学号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        </tr> 
         <tr>
          <%
        Student s=(Student)request.getAttribute("students");  // 
         %>

         <td><%=s.getId()%></td>
         <td><%=s.getStuno()%></td>
         <td><%=s.getName()%></td>
         <td><%=s.getGender()%></td>
         <td><%=s.getAge() %></td>
         </tr>
       </table>
      </body>
    参考的原文:基于Myeclipse与MySQL数据库表格的增删改查_myclass1312的博客-CSDN博客 

  • 这时候如果我们直接访问这儿view.jsp文件,应该是没有数据的,因为对象s无法从request对象获取,必须得先给这个request对象赋值才行,即应该从如下servlet路径跳转来view.jsp文件路径才行

  • public class viewservlet extends HttpServlet {
     
        private StudentDao dao=new StudentDao();
        public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
                    String idstr = request.getParameter("id");
                    int id = Integer.parseInt(idstr);
                    //将数据放入request中,传递到页面
                    Student student=dao.queryById(id);
                    request.setAttribute("students", student);
                    request.getRequestDispatcher("view.jsp").forward(request, response);
        // 这里是从当前页面跳转去哪个页面,同时传递了request, response这两个参数,这时候的request就是有内容的,接下来的view.jsp页面就能获取到内容而且动态生成html内容
        }
        
        public void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            this.doGet(request, response);
            }
    }

总结:每个xx.html文件,xx.jsp文件,servlet响应程序...都是需要在客户端浏览器通过URL来访问的。

xx.jsp文件,servlet响应程序因为含有java源代码,需要服务器电脑先执行一下,.jsp文件中的java代码一般会动态生成一些html内容嵌入在当前.jsp文件里面一起给浏览器显示出来;而servlet中的java代码一般是数据处理功能的,可能会通过request.getRequestDispatcher("view.jsp").forward(request, response); 

这样的方式跳转到其它有html内容的页面的URL(同时传递处理好的数据过去) 来显示结果。


http://chatgpt.dhexx.cn/article/NjrZ5gnS.shtml

相关文章

前端与后端接口的交互案例

一、案例描述 1&#xff0c;前端页面提供用户名&#xff0c;密码输入框。 2&#xff0c;通过Ajax发送请求到后端Serlvet。 3&#xff0c;后端Serlvet处理请求&#xff0c;根据输入的用户名和密码返回给前端不同信息 前端访问后端接口通过后端提供的的URL 二、主要代码 1、前…

前端和后端 数据交互的基本知识

一、首先了解前端、后端、数据三者的关系 1) 前端通常是html&#xff0c;css&#xff0c;js三者构成的页面的总称。运行在客户端。以浏览器为例。 2) 后端是指后端程序。比如java&#xff0c;php等编写的一些服务。用来操作服务器。 3) 数据&#xff0c;数据都存放在服务器上…

前端和后端交互的方式

1.前端开发与后台交互的方式 &#xff08;1&#xff09;form提交 同步请求 &#xff08;2&#xff09;Ajax提交 异步请求 发送json对象 一 、Ajax&#xff1a;异步的javascript和XML 主要优点&#xff1a; 1.异步请求&#xff0c;不妨碍用户浏览页面或者其他操作。 2.局部刷…

树与树的存储结构+二叉树的遍历

树的存储结构&#xff1a; 三序说的是根节点的访问顺序 深度优先遍历(先序、 中序和后序) 沿着上图路径行走: 第一次来到某个结点时访问&#xff0c;所得序列为先序遍历序列; 第二次来到某个结点时访问&#xff0c;所得序列为中序遍历序列; 第三次来到某个结点时访问&#xff0…

2023年最新前端面试题

HTML 一、HTML5标记 <header></header> 头标记<nav></nav> 导航标记&#xff0c;表示页面中导航链接部分<!--main标记在一个网页中只能有一个&#xff0c;主要内容区域要区别--> <main></main> 主要内容标记<secti…

每日一题之二叉树

描述 输入一个整数数组&#xff0c;判断该数组是不是某二叉搜索树的后序遍历的结果。如果是则返回 true ,否则返回 false 。假设输入的数组的任意两个数字都互不相同。 数据范围&#xff1a; 节点数量 0 \le n \le 10000≤n≤1000 &#xff0c;节点上的值满足 1 \le val \le 1…

2021最新最全前端面试题(包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等)

整理了一些前端面试题,希望对正在找前端工作的伙伴有用。本篇文章内容篇幅较大,主要针对初中级前端开发工程师。 篇幅过长,大家可以先点赞收藏以后慢慢看。 关于HTML 的title和alt属性有什么区别 alt:图片加载失败时,显示在网页上的替代文字title:鼠标(手机端该属性无…

CSS解决盒模型居中的问题,分分钟搞定!

一、简历的准备 简历制作是很重要的一个环节,一份好的简历会给面试官留下很不错的印象,也有助于你顺利通过简历筛选环节。 个人基本信息:主要是姓名,联系方式,邮箱,学历等;技术技能:对了解、熟练掌握、精通这类词有概念,不要随便用精通;因为面试官一般会根据简历内容…

培训前端开发机构,CSS文本样式值

一、简历的准备 简历制作是很重要的一个环节&#xff0c;一份好的简历会给面试官留下很不错的印象&#xff0c;也有助于你顺利通过简历筛选环节。 个人基本信息&#xff1a;主要是姓名&#xff0c;联系方式&#xff0c;邮箱&#xff0c;学历等&#xff1b;技术技能&#xff1…

学习路线图必不可少,CSS字体样式的使用

标签语义化&#xff1a; 语义和默认样式的区别&#xff1a; 默认样式是浏览器设定的一些常用tag的表现形式&#xff1b;语义化的主要目的就是让大家直观的认识标签和属性的用途和作用&#xff1b; 标签语义化作用&#xff1a; 当只有HTML页面时&#xff0c;没有CSS&#xf…

web前端开发自学难吗,CSS颜色基本样式

字节跳动算法题 链表 面试题&#xff1a;反转单向链表 题目需要将一个单向链表反转。思路很简单&#xff0c;使用三个变量分别表示当前节点和当前节点的前后节点&#xff0c;虽然这题很简单&#xff0c;但是却是一道常考题 以下是实现该算法的代码 var reverseList funct…

CSS的浮动属性,终获offer

前言 最近在准备面试&#xff0c;然后复习下之前写过的项目&#xff0c;书籍&#xff0c;笔记&#xff0c;文章。一看很多知识点都没有印象&#xff0c;最可拍的是连自己为了防止忘记写的文章竟然都感觉不是自己写的。有些开始怀疑人生了。 好了&#xff0c;废话少说&#xf…

CSS介绍,这些知识你必须拿下

前言 跳槽&#xff0c;这在 IT 互联网圈是非常普遍的&#xff0c;也是让自己升职加薪&#xff0c;走上人生巅峰的重要方式。那么作为一个普通的Android程序猿&#xff0c;我们如何才能斩获大厂offer 呢&#xff1f; 疫情向好、面试在即&#xff0c;还在迷茫踌躇中的后浪们&…

web开发在线培训,CSS浮动实战

一、简历的准备 简历制作是很重要的一个环节,一份好的简历会给面试官留下很不错的印象,也有助于你顺利通过简历筛选环节。 个人基本信息:主要是姓名,联系方式,邮箱,学历等;技术技能:对了解、熟练掌握、精通这类词有概念,不要随便用精通;因为面试官一般会根据简历内容…

CSS浮动实战,你还看不明白?

一、简历的准备 简历制作是很重要的一个环节,一份好的简历会给面试官留下很不错的印象,也有助于你顺利通过简历筛选环节。 个人基本信息:主要是姓名,联系方式,邮箱,学历等;技术技能:对了解、熟练掌握、精通这类词有概念,不要随便用精通;因为面试官一般会根据简历内容…

web设计与开发,CSS块元素

一、简历的准备 简历制作是很重要的一个环节&#xff0c;一份好的简历会给面试官留下很不错的印象&#xff0c;也有助于你顺利通过简历筛选环节。 个人基本信息&#xff1a;主要是姓名&#xff0c;联系方式&#xff0c;邮箱&#xff0c;学历等&#xff1b;技术技能&#xff1…

CSS介绍,含面试题+答案

前言 正式学习前端大概 3 年多了&#xff0c;接触前端大概 4 年了&#xff0c;很早就想整理这个书单了&#xff0c;因为常常会有朋友问&#xff0c;前端该如何学习&#xff0c;学习前端该看哪些书&#xff0c;我就讲讲我学习的道路中看的一些书&#xff0c;虽然整理的书不多&a…

CSS全局样式,帮你突破瓶颈

一、简历的准备 简历制作是很重要的一个环节,一份好的简历会给面试官留下很不错的印象,也有助于你顺利通过简历筛选环节。 个人基本信息:主要是姓名,联系方式,邮箱,学历等;技术技能:对了解、熟练掌握、精通这类词有概念,不要随便用精通;因为面试官一般会根据简历内容…

前端笔试错题总结

目录 题目分类HTMLinput的type属性如下&#xff1a; CSSJS算法操作系统计算机网络数据结构完全二叉树哈夫曼树二叉排序树大根堆 小根堆线性探查解决hash冲突 数据库浏览器 题目分类 HTMLCSSJS数据库算法操作系统计算机网络数据结构浏览器 HTML input的type属性如下&#xff…

图像处理之灰度变换

灰度变换 空间域增强空间域增强的特点线性变换分段线性变换非线性变换非线性变换图像前后灰度值关系直方图均衡 空间域增强 直接对构成图像的像素的灰度级的操作 输入图像 x ( j , i ) − − − > y ( j , i ) x(j, i)---> y(j, i) x(j,i)−−−>y(j,i) y ( j , i …