创建Asp.net MVC项目Ajax实现视图页面数据与后端Json传值显示

简述回顾

继上篇文章创建的mvc传值这里说明一下Json传值。在mvc框架中,不可避免地会遇到前台传值到后台,前台接收后台的值的情况(前台指view,后台指controller),有时只需要从控制器中返回一个处理的结果,这时返回Json格式的数据非常的方便,在Controller中Json()

返回JSON格式数据的JsonResult,比如:"{"Message":"Hello world!"}".我们这边就是要用该方法返回到视图一个json对象

创建Person对象类

cs 复制代码
    public class Person
    {
        public string name { get; set; }
          public string sex { get; set; }
          public string phone { get; set; }
          public Person(string n, string s, string p)
       {
           name = n;
           sex = s;
           phone = p;
       }
}

创建控制器ReturnPerson

cs 复制代码
  public JsonResult ReturnPerson(string name) {

      Person person = new Person(name, "男", "142341213");

      return Json(person, JsonRequestBehavior.AllowGet);
  }

视图页面代码

cs 复制代码
  <script src="~/jquery.min.js"></script>
  <script>
      function GetJosn() {
         
          $.get("/Default/ReturnPerson", { name: "李四" }, function (data) {
              $('#person').html("姓名:" + data.name + "<br/>性别:" + data.sex + "<br/>手机:" + data.phone);
           
          },"json");
      }
  </script>

body部分代码

cs 复制代码
 <input type="button" value="获取json数据"  onclick="GetJosn()"/>
    <h1>json数据显示</h1>
    <div id="person"></div>

点击获取json数据显示

后端返回的json格式

视图需要引入jquery

控制器ReturnPerson中用了一个Person类的对象,包含返回name,sex和手机phone,然后利用JSON()方法返回该对象就行,不需要将该对象转成json格式,同事注意用GET方法获取时,在JSON()方法中一定要指定可以用Get获取,否则会获取不到。

相关推荐
Cyan_RA92 天前
SpringMVC @RequestMapping的使用演示和细节 详解
java·开发语言·后端·spring·mvc·ssm·springmvc
Run Freely9373 天前
Ajax-day2(图书管理)-弹框显示和隐藏
前端·javascript·ajax
智商偏低4 天前
ASP.NET Core 中的简单授权
后端·asp.net
xkroy4 天前
ajax
前端·javascript·ajax
元亓亓亓4 天前
JavaWeb--day3--Ajax&Element&路由&打包部署
android·ajax·okhttp
Yvonne爱编码4 天前
AJAX入门-URL、参数查询、案例查询
前端·javascript·ajax
lwprain5 天前
龙蜥8.10中spark各种集群及单机模式的搭建spark3.5.6(基于hadoop3.3.6集群)
大数据·ajax·spark
知识分享小能手5 天前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
周杰伦fans6 天前
.net core webapi/mvc阿里云服务器部署 - 错误解决
阿里云·mvc·.netcore
BFT白芙堂6 天前
GRASP 实验室研究 论文解读 | 机器人交互:基于神经网络引导变分推理的快速失配估计
人工智能·神经网络·机器学习·mvc·人机交互·科研教育机器人·具身智能平台