zoukankan      html  css  js  c++  java
  • 利用Ajax调用controller方法并传递参数

    
    

    一、背景
    由于近期工作需要将人脸识别功能与选课系统结合,但是对前端知识了解的很少,只能边做边学了,因此在这边把遇到的一些坑说明一下,希望能帮助到像我一样的初学者

    
    

    二、具体内容
    这里采用框架为MVC,如果想在页面中不通过提交表单方式与控制器交互的话,可以用ajax去调用控制器方法并传递参数以及处理返回的json数据,方法如下

    
    

    页面代码:

     $.ajax(
        {
               url: '/User/facelog',     // 请求地址, 就是你的控制器, 如 test.com/home/index/index
               data: JSON.stringify({ stuID: stuID2 }),   // 需要传送的参数
               type: 'POST',   // 请求方式
               dataType: 'json', // 返回数据的格式, 通常为JSON
               contentType: 'application/json',             
               success: function (result) {
                   window.location.href = result.NextUrl;
                   msg = result.Msg;
                   console.log(result); // 请求成功后的回调函数, result 为响应内容
               },
               error: function () {
                   console.log('Send Request Fail..'); // 请求失败时的回调函数
               }
           }
       );
     [HttpPost]
     public JsonResult facelog(string  stuID)
        {
           User user = this.UserService.Select((User T) => (T.UserName == stuID) && T.Status == 0);
            if (user != null)
            {
                base.Session["UserInfo"] = user;
                AjaxMsg ajaxMsg = new AjaxMsg()
                {
                    Statu = "ok",
                    Msg = "登陆成功,正在跳转页面...",
                    NextUrl = "/User/Main"
                };
                return base.Json(ajaxMsg);
            }
            return base.Json(new { Statu = "error", Msg = "账号或密码错误!"});
        }   

    这里有几个坑需要特别说明一下:

    在URL填写中为‘/控制器/方法名’这里一定要注意,控制器指的并不是控制器全名,而是去掉controller的那个,这里我的控制器为UserController,因此这里填写User,话说我踩到这个坑,害我调试了好久。。。

    就是传递参数格式了,data这里传递的参数是动态的,因此就定义了全局变量存储,这里被坑的地方是stuID2 的值是从另外一个ajax请求中获得,但另外一个数据还未返回时这个ajax已经执行了,害我一直以为是data填的格式不对才导致数据无法传递到控制器中

    接第二点,如果想要在一个ajax执行完成后再执行另外一个,这里用 async: false即可,默认情况是为true的

    JSON.stringify 要与 contentType: 'application/json' 一起用才能很好的将数据传递过去

    关于返回数据,一般为json的需要解析一下

  • 相关阅读:
    LeetCode 264. Ugly Number II
    LeetCode 231. Power of Two
    LeetCode 263. Ugly Number
    LeetCode 136. Single Number
    LeetCode 69. Sqrt(x)
    LeetCode 66. Plus One
    LeetCode 70. Climbing Stairs
    LeetCode 628. Maximum Product of Three Numbers
    Leetcode 13. Roman to Integer
    大二暑假周进度报告03
  • 原文地址:https://www.cnblogs.com/romanticcrystal/p/10685196.html
Copyright © 2011-2022 走看看