zoukankan      html  css  js  c++  java

  • MVC和WebApi 使用get和post 传递参数。

    我们总结一下用js请求服务器的传参方法。

    Get方式

    Get主要是用来查询，一般分为无参，一个参数，多个参数，实体对象参数。

    1、无参

    1.  
      //Get没有参数
    2.  
      var get_f1 = function() {
    3.  
      $.ajax({
    4.  
      type: "get",
    5.  
      url: "/api/Demo",
    6.  
      success: function(data, status) {
    7.  
      if (status == "success") {
    8.  
      $("#div_test").html(data);
    9.  
      }
    10.  
      }
    11.  
      });
    12.  
      }

    2、一个参数

    1.  
      //Get一个参数
    2.  
      var get_f2 = function() {
    3.  
      $.ajax({
    4.  
      type: "get",
    5.  
      url: "/api/Demo",
    6.  
      data: { strQuery: JSON.stringify({ Id: "1", Name: "Jim", CreateTime: "1988-09-11" }) },
    7.  
      contentType: "application/json",
    8.  
      success: function(data, status) {
    9.  
      if (status == "success") {
    10.  
      $("#div_test").html(data);
    11.  
      }
    12.  
      }
    13.  
      });
    14.  
      }

    后台控制器方法

    1.  
      /// <summary>
    2.  
      /// 一个参数
    3.  
      /// </summary>
    4.  
      /// <param name="strQuery"></param>
    5.  
      /// <returns></returns>
    6.  
      [HttpGet]
    7.  
      public string Get(string strQuery)
    8.  
      {
    9.  
      //一个参数的时候，如果前端是传过来的是字符串的json可以反序列化成对象。
    10.  
      //TbCharging oData = Newtonsoft.Json.JsonConvert.DeserializeObject<TbCharging>(strQuery);
    11.  
      //return String.Format("{0},{1},{2},{3}", oData.Id, oData.Name, oData.Des, oData.CreateTime.ToString("yyyy-MM-dd hh:mm:ss"));
    12.  
      return "一个参数" + strQuery;
    13.  
      }


    备注：在Get方式的时候我们也可以把参数放在url，我这里为了前台写得统一些，全都放在data里面，感觉好看一点。

    3、多个参数

    1.  
      //Get多个参数
    2.  
      var get_f3 = function() {
    3.  
      $.ajax({
    4.  
      type: "get",
    5.  
      url: "/api/Demo",
    6.  
      data: { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },
    7.  
      success: function(data, status) {
    8.  
      if (status == "success") {
    9.  
      $("#div_test").html(data);
    10.  
      }
    11.  
      }
    12.  
      });
    13.  
      }

    后台控制器方法

    1.  
      /// <summary>
    2.  
      /// 多个参数
    3.  
      /// </summary>
    4.  
      /// <param name="Id"></param>
    5.  
      /// <param name="Name"></param>
    6.  
      /// <param name="CreateTime"></param>
    7.  
      /// <returns></returns>
    8.  
      [HttpGet]
    9.  
      public string Get(int Id, string Name, DateTime CreateTime)
    10.  
      {
    11.  
      return String.Format("多个参数,{0},{1},{2}", Id, Name, CreateTime.ToString("yyyy-MM-dd hh:mm:ss"));
    12.  
      }

    4、一个实体对象参数

    1.  
      //Get实体对象作为参数
    2.  
      var get_f4 = function() {
    3.  
      $.ajax({
    4.  
      type: "get",
    5.  
      url: "/api/Demo/GetModel",
    6.  
      data: { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },
    7.  
      success: function(data, status) {
    8.  
      if (status == "success") {
    9.  
      $("#div_test").html(data);
    10.  
      }
    11.  
      }
    12.  
      });
    13.  
      }


    备注：到这里有没有发现多个参数和一个实体对象的请求方法是一样的，假如两个接收的方法都写在同一个控制器里面的话，路由是区分不出来要匹配那个方法处理，

    所以要用自定义路由来区分，在WebApi里面改方法名字是没有用的。

    后台控制器方法

    1.  
      /// <summary>
    2.  
      /// 一个实体对象参数
    3.  
      /// </summary>
    4.  
      /// <param name="oData"></param>
    5.  
      /// <returns></returns>
    6.  
      [HttpGet]
    7.  
      [Route("GetModel")]
    8.  
      public string Get([FromUri]TbCharging oData)
    9.  
      {
    10.  
      return String.Format("一个实体对象参数，{0},{1},{2},{3}", oData.Id, oData.Name, oData.Des, oData.CreateTime.ToString("yyyy-MM-dd hh:mm:ss"));
    11.  
      }


    备注：在使用Get传递实体对象参数的时候要注意，因为Get方式的时候参数是写在url的，所以我们在后台用[FromBody]是拿不到实体参数的，需要写[FromUri]才行。

    Post方式

    Post方式我们一般用来做增、删、改操作。在WebApi中Post仅仅用来做增加操作，修改用Put，删除用Delete。这些在新建模板的时候就自动为我们生成了。

    还有要提一下的是Post只能传递一个参数，如果需要多个参数的时候我们需要把它们合并成一个扩展对象，当做对象来传递。

    在后台接收的时候我们需要在参数列表里面写上[FromBody]因为Post方式的参数就不在Url里面了。

    1、一个参数

    1.  
      //Post一个参数
    2.  
      var post_f1 = function() {
    3.  
      $.ajax({
    4.  
      type: "post",
    5.  
      url: "/api/Demo",
    6.  
      data: { "": "Jim" },
    7.  
      //data: "=Jim", //两种写法，其他写法获取不到值
    8.  
      success: function(data, status) {
    9.  
      if (status == "success") {
    10.  
      $("#div_test").html(data);
    11.  
      }
    12.  
      }
    13.  
      });
    14.  
      }

    注意：在写参数的时候我们不能把参数写成 data:{"name":"Jim"} 这种方式，因为在后台是拿不到值的。

    后台控制器方法

    1.  
      /// <summary>
    2.  
      /// 一个参数
    3.  
      /// </summary>
    4.  
      /// <param name="name"></param>
    5.  
      /// <returns></returns>
    6.  
      public string Post([FromBody]string name)
    7.  
      {
    8.  
      return "一个参数，" + name;
    9.  
      }

    2、一个实体对象参数

    1.  
      //Post一个对象（Post不能提交多个参数，只能将多个参数封装成一个对象）
    2.  
      var post_f2 = function () {
    3.  
      var postdata = { Id: "1", Name: "Jim", CreateTime: "1988-09-11" };
    4.  
      $.ajax({
    5.  
      type: "post",
    6.  
      url: "/api/Demo/PostAdd",//多个post的时候，路由会匹配不到，所以要自定义路由
    7.  
      //data: { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },
    8.  
      data: postdata,
    9.  
      success: function (data, status) {
    10.  
      if (status == "success") {
    11.  
      $("#div_test").html(data);
    12.  
      }
    13.  
      }
    14.  
      });
    15.  
      }

    后台控制器方法

    1.  
      /// <summary>
    2.  
      /// 一个对象
    3.  
      /// </summary>
    4.  
      /// <param name="oData"></param>
    5.  
      /// <returns></returns>
    6.  
      [HttpPost]
    7.  
      [Route("PostAdd")]
    8.  
      public object Post([FromBody]TbCharging oData)
    9.  
      {
    10.  
      var strName = String.Format("一个对象，{0},{1}", oData.Id, oData.Name);
    11.  
      return strName;
    12.  
      }

    备注：这里参数列表最好写上[FromBody]，虽然不写也能拿到值。

    3、一个数组参数

    1.  
      //Post数组作为参数
    2.  
      var post_f3 = function () {
    3.  
      var arr = ["1", "2", "3", "4"];
    4.  
      $.ajax({
    5.  
      type: "post",
    6.  
      url: "/api/Demo/PostArray",
    7.  
      contentType: 'application/json',
    8.  
      data: JSON.stringify(arr),
    9.  
      success: function (data, status) {
    10.  
      if (status == "success") {
    11.  
      $("#div_test").html(data);
    12.  
      }
    13.  
      }
    14.  
      });
    15.  
      }

    这里我们说一下contentType和dataType。

    contentType 

    发送信息至服务器时内容编码类型。假如你不写的话，默认值是: "application/x-www-form-urlencoded"。

    dataType

    预期服务器返回的数据类型。

    如果我们Post提交的是json参数，最好就写上 contentType: 'application/json'

    后台的控制器方法

    1.  
      /// <summary>
    2.  
      /// 数组作为参数
    3.  
      /// </summary>
    4.  
      /// <param name="ids"></param>
    5.  
      /// <returns></returns>
    6.  
      [HttpPost]
    7.  
      [Route("PostArray")]
    8.  
      public object Post(string[] ids)
    9.  
      {
    10.  
      return String.Format("{0},{1},{2}", ids[0], ids[1], ids[2]);
    11.  
      }

    4、实体集合参数

    1.  
      //Post对象集合，多个相同对象(多个不同对象的时候可以将多个对象封装成一个扩展对象)
    2.  
      var post_f4 = function () {
    3.  
      var arr = [
    4.  
      { Id: "1", Name: "Jim", CreateTime: "1988-09-11" },
    5.  
      { Id: "2", Name: "Lilei", CreateTime: "1990-12-11" },
    6.  
      { Id: "3", Name: "Lucy", CreateTime: "1986-01-10" }
    7.  
      ];
    8.  
      $.ajax({
    9.  
      type: "post",
    10.  
      url: "/api/Demo/PostMulti",//多个post的时候，路由会匹配不到，所以要自定义路由
    11.  
      contentType: 'application/json',
    12.  
      data: JSON.stringify(arr),
    13.  
      success: function (data, status) {
    14.  
      if (status == "success") {
    15.  
      $("#div_test").html(data);
    16.  
      }
    17.  
      }
    18.  
      });
    19.  
      }

    后台的控制器方法

    1.  
      /// <summary>
    2.  
      /// 对象集合
    3.  
      /// </summary>
    4.  
      /// <param name="lstCharging"></param>
    5.  
      /// <returns></returns>
    6.  
      [HttpPost]
    7.  
      [Route("PostMulti")]
    8.  
      public object Post([FromBody]List<TbCharging> lstCharging)
    9.  
      {
    10.  
      return String.Format("{0},{1}", lstCharging[0].Name, lstCharging[1].Name);
    11.  
      }

    自定义路由

    使用场景：用于方法重载，忽略方法名，自定义url

    使用步骤：

    1、在控制器类上方加入一个标记

    1.  
      [RoutePrefix("api/Demo")]
    2.  
      public class DemoController : ApiController
    3.  
      {}

    2、在方法中加入路由标记

    1.  
      /// <summary>
    2.  
      /// 数组作为参数
    3.  
      /// </summary>
    4.  
      /// <param name="ids"></param>
    5.  
      /// <returns></returns>
    6.  
      [HttpPost]
    7.  
      [Route("PostArray")]
    8.  
      public object Post([FromBody]string[] ids)
    9.  
      {
    10.  
      return String.Format("{0},{1},{2}", ids[0], ids[1], ids[2]);
    11.  
      }


    备注：上面的api/Demo和PostArray可以自己定义名字。像我这样写就可以直接用 url:"/api/Demo/PostArray"来访问了。
  • 相关阅读:
    什么是大小端
    mina
    出现jar包找不到的问题解决方案
    InnoDB 静态数据加密的常见问题合集
    mysqldump 数据库备份程序,mysqldump 选项合集
    出现The MySQL server is running with the --secure-file-priv option so it cannot问题的原因
    小睡一会，做了一个梦
    IntelliJ IDEA is a solution that appears after importing a project with a clock icon（idea导入项目之后出现时钟的解决方案）
    IntelliJIDE不显示项目文件夹的问题
    夏天的记忆
  • 原文地址：https://www.cnblogs.com/armyfai/p/9560400.html
Copyright © 2011-2022 走看看