《web应用技术》第三次课后练习-前端页面向后端发送数据的过程



已于 2024-04-18 20:45:53 修改

阅读量603

点赞数 24

文章标签： idea 后端 html

于 2024-04-17 17:07:52 首次发布

本文链接：https://blog.csdn.net/2302_76973330/article/details/137773207

版权

一、准备工作

1.创建product.html

2.在pojo下创建Product实体类

3.在controller下创建ProductController类

二、运行过程

三、将第二次作业的注册页面的信息发送到服务端

1.按照前面准备工作的步骤，将第二次作业的代码放在input.html

2.在pojo下放一个Input实体类

3.在controller中创建一个InputController类

目标：创建一个网页，在网页中输入信息，信息自动返回到服务端

一、准备工作

1.创建product.html

页面包括要填写产品名称及产品价格，当用户提交信息，页面会自动跳转到/addProduct(根据根据action的属性值的内容跳转)，当界面出现“ok”，表示信息提交成功

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="font-size: 15px">
<form action="addProduct">

    产品名称 ：<input type="text" name="name" value=""><br />
    产品价格： <input type="text" name="price" value=""><br />

    <input type="submit" value="增加商品">

</form>
</body>
</html>

2.在pojo下创建Product实体类

package com.itccc.pojo;

public class Product {

    private String name;
    private float price;

    @Override
    public String toString() {
        return "Product{" +
                "name='" + name + '\'' +
                ", price=" + price +
                '}';
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public float getPrice() {
        return price;
    }

    public void setPrice(float price) {
        this.price = price;
    }
}

3.在controller下创建ProductController类

package com.itccc.controller;
import com.itccc.pojo.Product;
import jakarta.servlet.http.HttpServletRequest;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ProductController {
    @RequestMapping("/addProduct")
    public String simpleParam1(HttpServletRequest request) {
        String name = request.getParameter("name");
        String ageStr = request.getParameter("price");
        int price = Integer.parseInt(ageStr);
        System.out.println("新加的产品信息为:"+name + "  :  " + price);
        return "OK";
    }

    @RequestMapping("/addProduct1")
    public String simpleParam(String name , Integer price){
        System.out.println("新加的产品信息为："+name+"  :  "+price);
        return "OK";
    }

    

    @RequestMapping("/addProduct2")
    public String simpleParam2(Product product){
        System.out.println("新加的产品信息为"+product);
        return "OK";
    }


}

二、运行过程

运行程序后，在页面输入localhost:8080/product.html,页面出现需要填写的商品信息，填入信息后，点击增加商品

页面会自动跳转到 http://localhost:8080/addProduct?name=1&price=10，页面返回ok

回到idea，控制台返回新增的信息

将product.html内action的属性值改为addProduct1，重新运行程序，提交信息后页面会跳转到/addProduct1

三、将第二次作业的注册页面的信息发送到服务端

1.按照前面准备工作的步骤，将第二次作业的代码放在input.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="output" method="post">
    <label for="sss">用户名：</label>
    <input type="text" name="username" id="sss"><br>

    <label for="ccc">密码：</label>
    <input type="password" name="password" id="ccc"><br>

    性别：
    <input type="radio" name="gender" value="男" id="male">
    <label for="male">男</label>
    <input type="radio" name="gender" value="女" id="female">
    <label for="female">女</label>
    <br>

    爱好：
    <input type="checkbox" name="hobby" value="旅游">旅游
    <input type="checkbox" name="hobby" value="电影">电影
    <input type="checkbox" name="hobby" value="游戏">游戏
    <input type="checkbox" name="hobby" value="音乐">音乐
    <br>

    城市：
    <select name="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="武汉">武汉</option>
    </select>
    <br>

    <br>
    <input type="submit" value="注册">
    <input type="reset" value="重置">
</form>

</body>
</html>

2.在pojo下放一个Input实体类

package com.itccc.pojo;

public class Input {

    private String name;
    private String password;
    private String gender;
    private String city;

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    @Override
    public String toString() {
        return "Input{" +
                "name='" + name + '\'' +
                ", password='" + password + '\'' +
                ", gender='" + gender + '\'' +
                ", city='" + city + '\'' +
                '}';
    }
}

3.在controller中创建一个InputController类

package com.itccc.controller;


import com.itccc.pojo.Input;
import com.itccc.pojo.Product;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.Arrays;

@RestController
public class InputController {
    @RequestMapping("/output")
    public String simpleParam(Input input,String[] hobby){
        System.out.println(input);
        System.out.println("爱好为："+Arrays.toString(hobby));
        return "OK";
    }

}

4.运行过程

运行成功后在页面输入地址http://localhost:8080/input.html，点击注册