【Ajax前后端交互的body对象属性类型问题】

于 2023-07-04 17:23:12 发布
阅读量208 收藏
点赞数 1
文章标签： javascript node.js ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43253044/article/details/131538920
版权

1. 前端部分

发送的后三个属性，都确保为number类型
在这里插入图片描述

2. 后端部分

到后端以后，发现都成为了string类型
在这里插入图片描述

3. 结论

body对象的属性值类型可能会改变，接收后需要在进行处理，得到自己想要的数据类型。
在这里插入图片描述

4.body属性值改变的原因

我在前端发送Ajax请求时未明确指定Content-Type头信息，浏览器会根据请求体的数据类型进行自动推断，并设置相应的Content-Type头。
所以这里出现这种问题，浏览器可能将请求体的数据类型解析为application/json格式，所以在后端拿到的属性值变为了string.

爱不积极
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax三种传值方式
swimming_in_IT_的博客
09-25 1万+
$.ajax({    ajax传值方式：1，url后面直接跟参数，2,headers:传值方式。3，body:传值方式，也就是data:{中间是json字符串/json对象}                             url: restApiServer+ 'user?name=' + name,  服务端取值：request.query.name
ajax body设值,jquery发送ajax请求，参数怎么放到http请求的body里面
weixin_39973492的博客
08-06 5116
匿名用户1级2017-09-03 回答jqueryajax常用参数：$.ajax({url:"http://cloud.keji01.com/",//ajax请求地址修改成自己的cache:false,//(默认:true,dataType为script和jsonp时默认为false)设置为false将不缓存此页面，建议使用默认type:"GET",//请求...
ajax请求后台传body格式数据，服务器@RequestBody需要注意实相符
PatPeng的博客
12-16 4277
ajax请求以body传输书写方式 $.ajax({ type: "post", contentType:"application/json", dataType: 'json', data:JSON.stringify({"type":"1"}), url: "http://www.demo.com/test/test", success: function(data)...
@ResponseBody Ajax用法
饭桶一生奋斗
05-17 3090
jsp js代码片段<script type="text/javascript"> function showmer(obj){ var mtypeid=$("#mctypeid").val(); //var mid=$("#cmid").val(); $.ajax({ type:"POST", url :"${bas
ajax
热门推荐
Junit的博客
01-26 1万+
原文目录http://www.cnblogs.com/rogge7/category/1083922.html   1.Jquery中AJAX参数详细(1)-转 http://www.cnblogs.com/qiufuwu618/archive/2012/12/20/2826190.html Jquery中AJAX参数详细列表： 参数名 类型 描述 url Stri...
ajax+post+json+@requestBody走天下
zouk‘s blogs
10-22 1982
什么js对象，json对象，json字符串？它们又长什么样呢？ js对象：jsObj json对象：jsonObj json字符串：jsonString ajax如何发post？1：定义json对象var obj = {"factoryId":Id}; 2：写$.ajax$.ajax({ type:”POST”, url: “/ASW/wxcurrent.h
spring mvc利用ajax向controller传递对象的方法示例
08-29
【Spring MVC 利用Ajax向Controller传递对象】在...理解这些注解的用法，能够帮助开发者更有效地构建前后端交互的Web应用程序。在实际开发中，应根据具体需求选择合适的方法来处理Ajax请求，确保数据的正确传递和处理。
AJAX XMLHttpRequest对象详解
10-22
以上就是一个简单的AJAX请求示例，通过XMLHttpRequest对象实现了与服务器的交互，而无需刷新整个页面。在实际应用中，开发者通常会使用jQuery、axios、fetch等库来简化这一过程，但理解XMLHttpRequest的工作原理对于...
前端弹出对话框 js实现ajax交互
10-21
在`outil.js`中，关键代码应包括对`ecType="dialog"`的选择器进行绑定，监听`click`事件，当用户点击时，触发弹窗并进行Ajax交互。 ```javascript jQuery.fn.extend({ dialog: function(options) { // ...在这里...
springboot前后台数据交互的示例代码
08-29
在前后端数据交互中，SpringBoot 提供了多种方式来处理数据传递，包括通过路径变量、查询字符串、JSON 对象以及 FormData。下面将详细介绍这些方法的使用。 1. **路径变量**： 路径变量是在 URL 路径中嵌入的动态...
判断请求头中是否含有某属性来判断是否是ajax请求
12-12
在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许在不...同时，理解并灵活运用 `XMLHttpRequest` 或jQuery的Ajax相关属性和方法，可以帮助我们更好地实现动态交互的Web应用。
【不同入参ajax请求】ajax请求接口入参form形式和body形式如何写前端代码（附源码详解）
赏樱看雪撸代码
03-31 1682
json数据ajax请求，json字符串请求ajax，ajax调用接口，ajax请求接口，不同的ajax请求入参，如何实现前后端ajax请求，contentType多种类型介绍，form请求接口，body请求接口
ajax把参数放body里,ajax请求-jquery发送ajax请求，参数怎么放到http请求的body里面...
weixin_32200323的博客
08-05 3689
$.ajax({url:"http://cloud..com/",//ajax请求地址修改成自己的cache:false,//(默认:true,dataType为script和jsonp时默认为false)设置为false将不缓存此页面，建议使用默认type:"GET",//请求方式"POST"或"GET"，默认为"GET"。注意：其它HTTP请求方法，如PUT和...
axios get 请求中如何添加 body
学习笔记
01-24 9467
axios get 请求中如何添加 body axios get 请求是不允许添加 body 的，如果真的需要，跟后台商量改成 post 请求比较好
Ajax详解~及原理刨析
可达鸭的博客
07-25 1800
Ajax工作原理、Ajax工作流程、原生Ajax的使用和Jquery中ajax的使用方法
今天遇到的js的问题（ajax赋值 与 多次绑定）
sinat_33758988的博客
02-02 234
get方法返回值并赋值给全局变量undefined的问题 因为ajax是异步调用，所以在赋值return的时候，response还没有回来，所以造成返回了undefined值的现象 解决方法：将ajax的异步调用置为false，如： $.ajax({ type:'GET', url:"“, dataType:'json', asy...
express 解析 ajax post 数据 body 为空对象
qq_42535651的博客
12-14 2528
问题描述： 前端使用 jquery 的 ajax 向后端发送 post 数据并携带参数，但是 express 解析的 body 为空对象。 代码： 使用 express 框架解析前端 post 的数据时 var express = require("express"); var bodyParser = require("body-parser"); var app = express(); app.use(bodyParser.urlencoded({ extended: false })); ap
ajax的post请求 @RequestBody解析问题
沉淀的博客
11-02 8346
 1、前端传递的参数不能大于后端类接收的个数，名称也不能对应不上   $.ajax({            url : "http://localhost:8080/dqms/lib/libAreaDeptInfoItem/queryLibAreaDeptInfoItemList.go",            type : "POST",            contentType: "...
@responseBody和ajax异步的关系---今天才明白
Super的专栏
04-18 6246
今天才明白@responseBody和异步ajax的关系：以前听xxx说异步的controller方法都要加注解@responseBody，不然就请求不到方法，我也就记住了，可今天才发现，原来有些异步请求的controller也可以不用@responseBody注解，也是可以请求到对应的方法的。根本原因还是我没有搞明白@responseBody注解的应用场景。 @responseBody的应用场
jQuery Ajax前后端使用JSON进行交互示例
最新发布
07-13
当使用jQuery Ajax进行前后端交互时，可以通过JSON格式来传递数据。以下是一个示例： 前端代码（HTML和JavaScript）： ```html <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button onclick="sendData()">发送数据</button> <script> function sendData() { // 创建要发送的数据对象 var data = { name: "John", age: 30 }; // 发送Ajax请求 $.ajax({ url: "backend.php", // 后端处理请求的URL type: "POST", // 请求类型 data: JSON.stringify(data), // 将数据对象转换为JSON字符串 contentType: "application/json", // 设置请求头的Content-Type success: function(response) { // 请求成功后的处理逻辑 console.log(response); }, error: function(xhr, status, error) { // 请求失败后的处理逻辑 console.log(error); } }); } </script> </body> </html> ``` 后端代码（PHP示例）： ```php <?php // 从请求中获取JSON数据 $jsonData = file_get_contents('php://input'); // 解析JSON数据为PHP数组 $data = json_decode($jsonData, true); // 处理数据逻辑 $name = $data['name']; $age = $data['age']; // 构造响应数据 $response = array( 'status' => 'success', 'message' => 'Data received successfully', 'name' => $name, 'age' => $age ); // 将响应数据转换为JSON字符串 $jsonResponse = json_encode($response); // 设置响应头的Content-Type header('Content-Type: application/json'); // 输出响应数据 echo $jsonResponse; ?> ``` 在上述示例中，前端代码中的`sendData()`函数会在按钮点击时被调用。它创建一个包含`name`和`age`属性的JavaScript对象，并将其转换为JSON字符串。然后使用jQuery Ajax发送POST请求到后端的`backend.php`文件。后端代码中，通过`file_get_contents('php://input')`获取请求中的JSON数据，并使用`json_decode()`将其解析为PHP数组。然后可以根据需要处理数据，构造响应数据，并将其转换为JSON字符串。最后通过设置响应头的Content-Type为`application/json`并输出响应数据，完成与前端的交互。 请注意，这只是一个简单的示例，实际应用中可能需要根据具体需求进行适当的修改和处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值