Vue向后台提交数据，C#一般处理程序接收数据

最新推荐文章于 2023-06-25 11:10:10 发布

奔跑的熊猫

最新推荐文章于 2023-06-25 11:10:10 发布

阅读量3.9k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/huyanliang/article/details/90346802

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/vue.min.js"></script>
<script src="js/vue-resource.js"></script>
</head>
<body>
<div id="container">
<button v-on:click="btnAdd_click">添加数据</button>
<table>
<thead>
<tr>
<th>编号</th>
<th>标题</th>
<th>作者</th>
<th>时间</th>
</tr>
</thead>
<tbody>
<tr v-for="user in userList">
<td>{{ user.id }}</td>
<td>{{ user.title }}</td>
<td>{{ user.author }}</td>
<td>{{ user.addTime }}</td>
</tr>
</tbody>
</table>
</div>
<script>
var uList = [];
Vue.http.interceptors.push(function (request, next) {
// ...
// 请求发送前的处理逻辑
// ...
console.log("请求发送前的处理逻辑")
next(function (response) {
// ...
// 请求发送后的处理逻辑
// ...
// 根据请求的状态，response参数会返回给successCallback或errorCallback
console.log("请求发送后的处理逻辑")
return response
})
})

Vue.http.get("WebForm8.aspx").then(function (res) {
console.log("请求成功响应")
console.log(res.json().rows);
uList = res.json().rows;
var vue = new Vue({
el: "#container",
data: {
userList: uList
},
methods: {
btnAdd_click: function () {
var user = {
id: 10,
title: "最新消息",
author: "张三",
addTime:"2019-5-19"

};
this.$http.post("WebForm1.aspx", user)
.then(function (res) {
console.log(res.text());
alert("添加完成");
}, function (err) {
console.log(err);
});
}
}
});
}, function (res) {
console.log(res);
});

</script>
</body>
</html>

后端：WebForm8.aspx(浏览功能)

DataTable dt= DBHelper.GetDataTable("select * from TBInfors");
int number = dt.Rows.Count;//获取数量
string jsonstr = JsonConvert.SerializeObject(dt);//转换为json字符串
// Response.Write("\"total\":\""+number+"\",\"rows\":");
Response.Write("{\"total\":\"" + number + "\",\"rows\":");
Response.Write(jsonstr);
Response.Write("}");

后端：WebForm1.aspx（添加，修改，删除功能的实现方式）

StreamReader stream = new StreamReader(Context.Request.InputStream);

string payload = stream.ReadToEnd();
object Jonstr = JsonConvert.DeserializeObject(payload);
var dynData = (TBInfors)JsonConvert.DeserializeObject(payload, typeof(TBInfors));

剩下的diam操作dynData的对象数据就可以了，其他代码省略

奔跑的熊猫

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue向后台提交数据，C#一般处理程序接收数据

前端：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> ...
复制链接

扫一扫