WebApi后端的List<String>前端如何发送?

54 篇文章 14 订阅
16 篇文章 1 订阅

WebApi作为RESTful的风格已经广为流行,在后端有时我们需要传入List<String>类型的参数,那这时前端要如何发送数据呢?按以往ajax的经验,我们可能会选择post的方式,以formdata或者json数据来提效,比如

$.post(url,{'list':data},function(success){...})
或者
$.ajax(type:"post",data:{"list":data},success:function(success){...})
或者
var formData=new FormData();
formData.append("list",data);
$.ajax(type:"post",data:formData,success:function(success){...})

但是以上的三种方式,在后端都无法有效的收到数据。后端的WebApi函数如下

[HttpPost]
public HttpResponseMessage Send([FromBody]List<String> list)
{
  if(list==null||list.count<=0)
 {
	//....
 }
else
{
//....
}
}
后端收到的list都是0个,为什么呢?

原因在于,这里收的是Request Payload形式的json数据,所以只要我们在ajax的时候指定合适的content-type即可。新的代码如下

 $.ajax({
                    type: 'POST',
                    url: "/Api/Conversation/CancelRegister",                    
                    contentType: 'application/json; charset=utf-8',//将json数据以request payload的形式发起请求
                    data: JSON.stringify(chatIdList),
                    success: function (response) {}
});
这时后端即可收到数据了。

转载请注明出处。


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Warehouse Management</title> </head> <body> <h1>Warehouse Management</h1> <p>Scan the barcode to get the warehouse number:</p> <input type="text" id="barcode"> <button onclick="getWarehouseNo()">Get Warehouse Number</button> <p id="warehouseNo"></p> <br> <hr> <p>Add warehouse number manually:</p> <input type="text" id="manualBarcode"> <input type="text" id="manualWarehouseNo"> <button onclick="addWarehouse()">Add Warehouse</button> <br> <hr> <p>View all warehouses:</p> <ul id="warehouseList"></ul> </body> <script src="warehouse.js"></script> </html>function getWarehouseNo() { let barcode = document.getElementById("barcode").value; let xhr = new XMLHttpRequest(); xhr.open("GET", "/api/warehouse/" + barcode, true); xhr.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { document.getElementById("warehouseNo").innerHTML = "Warehouse Number: " + this.responseText; } }; xhr.send();}function addWarehouse() { let barcode = document.getElementById("manualBarcode").value; let warehouseNo = document.getElementById("manualWarehouseNo").value; let xhr = new XMLHttpRequest(); xhr.open("POST", "/api/warehouse/" + barcode + "/" + warehouseNo, true); xhr.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { alert("Warehouse added successfully"); } }; xhr.send();}function getAllWarehouse() { let xhr = new XMLHttpRequest(); xhr.open("GET", "/api/warehouse", true); xhr.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { let data = JSON.parse(this.responseText); let warehouseList = document.getElementById("warehouseList"); for (let warehouse in data) { let list = document.createElement("li"); list.innerHTML = warehouse + ": " + data[warehouse].join(", "); warehouseList.appendChild(list); } } }; xhr.send();}getAllWarehouse();根据这些前端代码写出对应的后端java代码按三层架构来写以及启动类
05-25
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值