MUI VUE 获取 .NetMVC Json

原创已于 2022-09-07 10:57:25 修改 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

于 2019-06-26 16:09:35 首次发布

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用Vue.js在前端获取后端C#发送的数据，通过XMLHttpRequest实现GET请求，从前端组件中调用后端API，解析返回的JSON数据并更新视图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端部分

export default {
name: 'Login',
data () {
return {
// todos : [
       // {id:'1',name:'11',invoice:'111',isdefault:'false'},
       //    {id:'2',name:'22',invoice:'222',isdefault:'true'}
// ],
todos:[],
currentId:'',
currentDefault:''
   }
},

mounted(){
//此方法直接使用浏览器调试无法跨域，需在HBuilder模拟或者打包成app
var self=this
var xhr=new XMLHttpRequest();
   xhr.onreadystatechange=function(){
       switch(xhr.readyState){
           case 4:
           if(xhr.status==200){
var order=JSON.parse(xhr.responseText);
self.todos=order.data
           }else{
               alert('获取信息失败！', null, '');
           }
           break;
           default:
           break;
       }
   }
   xhr.open('GET','http://XXXXXXXXX/test/GetCommonInfo');
   xhr.send();
}

}

后端部分

class CommonInfo
{
public string id { get; set; }
public string name { get; set; }
public string invoice { get; set; }
public string isdefault { get; set; }
}
public JsonResult GetCommonInfo()
{
List<CommonInfo> result = new List<CommonInfo>
{
new CommonInfo { id = "1", name = "姓名1", invoice = "发票1", isdefault = "false" },
new CommonInfo { id = "2", name = "姓名2", invoice = "发票2", isdefault = "true" },
new CommonInfo { id = "3", name = "姓名3", invoice = "发票3", isdefault = "false" }
};
return Json(new { result = true, data = result }, JsonRequestBehavior.AllowGet);
}