javaWeb 交互

1.前台发送请求的三种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>前台发送请求的方式1:通过超链接</p>
    <a href="http://www.baidu.com">指向互联网资源</a>
    <a href="index.html">指向项目内部的页面资源</a>
    <a href="/xxx">指向项目内部的Java资源</a>
 
    <hr>
    <p>前台发送请求的方式2:通过JS</p>
    <button id="btn">点击按钮发送一个请求</button>
 
    <hr>
    <p>前台发送请求的方式3:通过表单</p>
    <form action="index.html" method="post">
        账号:<input type="text" name="username"><br>
        <input type="submit" value="提交">
    </form>
 
 
    <script>
        document.getElementById("btn").onclick = function (){
            location.href = "index.html";//本质依然是超链接
        }
    </script>
</body>
</html>

2.后台如何接受前台发出的请求---Servlet创建方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
        <p>后台如何获取前台发来的请求</p>
        <p>答:通过tomcat提供的Servlet类来实现</p>
        <p>什么是Servlet:处理前台请求的一个类</p>
        <p>如何去创建Servlet:</p>
        <p>1.导入jar包---servet-api.jar  在tomcat的lib目录里面</p>
        <p>2.在servlet的包下创建一个Servlet的类</p>
        <p>2.1 Servlet的命名规范: XxxServlet  其中Xxx表示什么功能的Servlet </p>
        <p>3.继承HttpServlet</p>
        <p>4.重写父类的service方法,然后把默认的super删除</p>
        <p>5.在类上添加@WebServlet("/Xxx") 注解。表示前台通过什么请求路径访问该类,一般和类名同名</p>
 
        <p>测试如下Servlet</p>
        <a href="/TestServlet">通过超链接访问Servlet</a>
        <button id="btn">通过JS访问Servlet</button>
 
    <script>
        document.getElementById("btn").onclick = function (){
            location.href = "/TestServlet";
        }
    </script>
</body>
</html>

3.前台如何发送带有数据的请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>前台发送携带数据的请求的方式1:通过超链接</p>
<p>语法如下:在URL地址的后面加上?key=value&key=value&key=value的形式即可</p>
<p>注意事项:都是英文状态下的符号,如果含有中文的内容 也无需加引号</p>
<a href="index.html?id=123&name=张三">指向互联网资源</a>
 
<hr>
<p>前台发送携带数据的请求的方式1:通过JS</p>
<button id="btn">点击按钮发送一个请求</button>
 
<hr>
<p>前台发送请求的方式3:通过表单</p>
<p>注意事项:内部的表达元素都要加上name来修饰。因为后台都是通过name来获取值</p>
<p>注意事项:单选框:加上若干个相同的name即可,记得补充value</p>
<p>注意事项:多选框:加上若干个相同的name即可,记得补充value</p>
<p>注意事项:下拉框:内部的option的value值可以省略的,但是你要知道,如果省略了以option标签的内部为准。如果没省略就以value为准</p>
 
<form action="/RegServlet" method="post">
    账号:<input type="text" name="username"><br>
    密码:<input type="password" name="password"><br>
    性别:
    <input type="radio" name="sex" value="男" checked >男
    <input type="radio" name="sex" value="女"  >女<br>
    爱好:
    <input type="checkbox" name="likes" value="吃">吃
    <input type="checkbox" name="likes" value="喝">喝
    <input type="checkbox" name="likes" value="玩">玩
    <input type="checkbox" name="likes" value="乐">乐
    <br>
    地址:
    <select name="address">
        <option>湖南</option>
        <option value="123广东~">广东</option>
        <option>云南</option>
    </select> <br>
    自我介绍:
    <textarea name="jieshao">自我介绍:</textarea>
    <br>
    生日:<input type="date" name="birthday"><br>
    <input type="submit" value="提交">
</form>
 
 
<script>
    document.getElementById("btn").onclick = function (){
        location.href = "index.html?id=456";//本质依然是超链接
    }
</script>
</body>
</html>

4.后台如何接受前台的数据 

package com.yyzy.servlet;
 
import com.yyzy.dao.UserInfoDao;
import com.yyzy.entity.Userinfo;
 
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;
 
@WebServlet("/RegServlet")
public class RegServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接受数据的流程:
        //1.设置编码
        req.setCharacterEncoding("utf-8");
 
        //收集单独独立的数据,例如账号密码性别年龄生日自我介绍等等
        //xxx表示前台的参数名是什么  接受返回值全是String  需要自行转换
//        String xxx = req.getParameter("xxx");
 
        //收集多个数据:例如爱好  需要遍历 来一一取值
//        String[] xxx = req.getParameterValues("xxx");
 
        String username = req.getParameter("username");
        System.out.println("账号为" + username);
        String password = req.getParameter("password");
        System.out.println("密码为" + password);
 
        String sex = req.getParameter("sex");
        System.out.println("sex为" + sex);
        String[] likes = req.getParameterValues("likes");
        String l = "";
        for (int i = 0;i<likes.length;i++){
            if(i==likes.length-1){
                l = l + likes[i] ;
            }else{
                l = l + likes[i] + ",";
            }
        }
 
        String birthday = req.getParameter("birthday");
        System.out.println("birthday为" + birthday);
 
        String address = req.getParameter("address");
        System.out.println("address为" + address);
        String jieshao = req.getParameter("jieshao");
        System.out.println("jieshao为" + jieshao);
 
        UserInfoDao ud = new UserInfoDao();
        Userinfo userinfo = new Userinfo(null,username,password,sex , l ,address,jieshao,birthday);
 
        boolean b = ud.regUserinfo(userinfo);
        System.out.println(b);
    }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值