表单发送json数据

最新推荐文章于 2024-06-24 15:01:00 发布

湫鹤椿水

最新推荐文章于 2024-06-24 15:01:00 发布

阅读量1.1k

点赞数 1

文章标签： json 前端 javascript

本文链接：https://blog.csdn.net/m0_71774042/article/details/133342285

版权

一、表单默认支持的几种数据处理类型

A、表单通过enctype属性可以指定数据发送时处理的格式

application/x-www-form-urlencoded（默认）这种方式只能发送文本数据，键值对之间用&号连接。不指定enctype就都是此种方式
multipart/form-data 此种方式，直接使用二进制编码，当要上传文件时就必须指定此种编码方式
text/plain 此种编码方式，直接使用空格变换为+号的方式，但是不对特殊字符编码（不常用）

二、将表单数据转化为json发送

A、由上面三种默认方式我们知道，默认的几种方式都无法将数据转化为JSON数据，所以我们需要引入ajax技术

B、什么是AJAX（Asynchronous Javascript And XML）由，它是一种再不改变页面结构的同时动态更新页面局部信息的思想，xml是前后端数据传输的数据格式，但是现在这种格式已经不常用，前后端经常使用JSON格式的数据来交互数据。

C、XmlHttpRequest对象就实现了这个思想，它能够将数据发送到指定路径的后端服务器，然后根据后端反馈状态等来接收后端返回数据，从而达到返回数据更新到页面的功能，当然也可以再发送之前设定Content-Type等请求头信息。

D、使用XmlHttpRequest对象将Json数据传到后端。

大概思路是首先监测表单的提交事件，然后阻止事件默认行为，之后获取表单中所有元素，将这些元素value和name利用循环添加到一个对象结构体中，再利用JSON这个对象的stringty方法将js对象转换为json对象，最后设置请求头发送数据，监测返回内容写入页面。
这里利用了一些后端的thymeleaf技术，可以将th:value语法当作值来当作value来对待，重点不在这上面。

<body>
<form th:action="@{'/addOver'}" method="post" id="myForm">
  姓名:<input type="text" name="name"><br>
  性别:男<input type="radio" name="sex" value="男" ><br>
      女<input type="radio" value="女" name="sex"><br>
  学号: <input type="text" placeholder="请输入学号！" name="studentId"><br>
  学院: <select name="college">
             <option value="文法学院">文法学院</option>
             <option value="软件学院">软件学院</option>
             <option value="建艺学院">建艺学院</option>
              <option value="医学院">医学院</option>
      </select><br>
  专业班级:<input type="text" placeholder="例：汉语言文学2104" name="className"><br>
  电话：<input type="tel" name="telephone"><br>
  <input type="submit" value="提交" id="me">
</form>
<script>
    //获取表单对象，并添加提交实践监听器,监听函数中第二个参数是一个函数，中间会自动传入实践对象
    document.getElementById("myForm").addEventListener("submit",function (event){
        //组织默认提交事件的发生
        event.preventDefault();
        //获取表单中所有元素
        let elements = this.elements;
        //遍历元素的值加入对象结构
        let objectUtil = {};
        for(let i =0; i < elements.length;i++){
            objectUtil[elements[i].name] = elements[i].value;
        }
        //至此表单中所有数据都被装入js对象，我们将对象转为json对象，备传。
        let jsonRel=JSON.stringify(objectUtil);
        //创建XmlHttpRequest对象
        var toFile = new XMLHttpRequest();
        //指定请求类型，路径及是否异步
        toFile.open("post","http://localhost:3777/tableWrite/addOver",true);
        //设置请求头，变为application/json类型
        toFile.setRequestHeader("Content-Type","application/json");
        //发送数据
        toFile.send(jsonRel);
        //最后监听返回状态，一旦发生改变，就跳转页面
        toFile.onreadystatechange = function (){
           if(toFile.readyState == 4 && toFile.status == 200){
            alert("数据添加成功");
            //接收返回页面，并打开新窗口显示
               let responesRel=toFile.responseText;
               document.write(responesRel);

           }

        }
    })

</script>
</body>

最后说明，上面例子中后端返回的是一个html页面，所以，直接写到原文档覆盖了。

湫鹤椿水

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
表单发送json数据

大概思路是首先监测表单的提交事件，然后阻止事件默认行为，之后获取表单中所有元素，将这些元素value和name利用循环添加到一个对象结构体中，再利用JSON这个对象的stringty方法将js对象转换为json对象，最后设置请求头发送数据，监测返回内容写入页面。这里利用了一些后端的thymeleaf技术，可以将th:value语法当作值来当作value来对待，重点不在这上面。<body>姓名:<input type="text" name="name"><br>
复制链接

扫一扫