Javaweb前台如何发送请求和数据给后台

crazy 阿飞

已于 2023-12-16 16:52:27 修改

阅读量206

点赞数

文章标签： web 前端 html5

于 2023-12-16 16:11:05 首次发布

本文链接：https://blog.csdn.net/qq_72211650/article/details/135031533

版权

本文详细介绍了HTML中通过超链接、表单以及JavaScript实现的请求发送方式，以及如何在前台向后台发送数据，包括GET和POST方法，以及使用不同元素如链接、表单字段和JavaScript的实践示例。

摘要由CSDN通过智能技术生成

一、html发送请求的方式

① 超链接

        <a href="http://www.baidu.com">外部的百度链接</a>
        <a href="xxx.html">内部的本地链接</a>

超链接，通过href属性中的路径值发送请求实现访问

② 表单

        <form action="xxx.html"  method="post" >
            <input type="submit" value="提交">
        </form>

表单，通过action属性中的路径值发送请求实现访问

③ js语法实现，本质是超链接

               <button id="btn">点击我利用JS发送请求</button>
         <script>
            document.getElementById("btn").onclick = function (){
                location.href = "xxx.html";
            }
        </script>

二、前台如何发送数据给后台

① 超链接发送数据

<a href="后台接收数据的类的路径?id=123&name=张三&age=18">发送若干数据</a>

超链接发送数据，只需要href中的路径值后面加上?key=value&key=value...的形式即可

② 表单发送请求

     <form action="后台接收数据的类的路径"  method="post" >
            账号：<input type="text" name="username" > <br>
            密码：<input type="password" name="password" > <br>
            性别：
            <input type="radio" name="sex" checked  value="男" >男
            <input type="radio" name="sex"  value="女" >女
            <br>
            地址:
            <select name="address" >
                <option>xx</option>
                <option>xx</option>
                <option>xx</option>
            </select>
            <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>
            简介：
            <textarea name="jieshao">自我介绍：</textarea> <br>
            生日:
            <input name="birthday" type="date">  <br>

            <br>
            <input type="submit" value="提交">
        </form>

表单发送数据，通过给每个需要传数据的表单标签加上name属性即可

③ js实现发送数据

        
        <button id="btn">发送带有数据的请求</button>
        <script>
            document.getElementById("btn").onclick = function (){
                location.href = "后台接收数据的类的路径?id=123&sex=男";
            }
        </script>

js发送数据，通过js的属性location.href = 路径值进行数据的传输