Ajax 调用Web API大全

最新推荐文章于 2022-10-07 08:19:40 发布
最新推荐文章于 2022-10-07 08:19:40 发布
阅读量1.1k 收藏 4
点赞数 2
分类专栏： c# MVC 文章标签： Ajax 调用 Web API API 使用 c# ajax c# MVC ajax .net ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tx1721110240/article/details/102989820
版权

 

目录

首先配置一下WebApiConfig

调用无参数方法

Get

Get传递实体

GetUri传递实体

Get序列化后传递实体

Get请求失败405

Post请求单个参数

Post请求多个参数

Post传递实体

Post序列化后传递实体

Post使用Jobject接收多个参数

Put请求单个参数

Put传递实体

Put序列化后传递实体

Put使用Jobject接收多个参数

 HttpDelete与HttpPut是一样的就不写了

首先配置一下WebApiConfig

         config.Routes.MapHttpRoute(
             name: "DefaultApi2",
             routeTemplate: "api/{controller}/{action}/{id}",
             defaults: new { id = RouteParameter.Optional }
         );//新增api路由到指定action
         config.Routes.MapHttpRoute(
               name: "DefaultApi",
               routeTemplate: "api/{controller}/{id}",
               defaults: new { id = RouteParameter.Optional }
           );

添加一个新的站点地图，为什么要添加上面这个新的呢？

我们来看一下系统自动生成的地址：api/{controller}/{id}

简单来说如果要访问api的地址就需要在地址前加api然后是controller的名字最后是参数，没错没有方法名称，也就是说系统最开始生成的站点地址不需要寻找方法名称，只需要给参数就可以了，但是如果调用无参数的方法就会找不到路径，这个问题很尴尬，大家注意一下

调用无参数方法

   public class ValuesController : ApiController
    {
        [HttpGet]
        // GET api/values
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }
    }
function GetNoParameters() {
        var par = {         
        };
        $.ajax({
            type: "get",
            url: "/api/Values/Get",
            data: par,
            dataType: "json",
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.log(e);
            }
        });
    }

Get

[HttpGet]
public string Get(int id)
{
    return "value";
}
function Get() {
        var par = {
                    "id":1
                    };
        $.ajax({
            type: "get",
            url: "/api/Values/Get",
            data: par,
            dataType: "json",
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.log(e);
            }
        });
    }

Get传递实体

[HttpGet]
public IEnumerable<Users> GetUserByModel(Users user)
{
    //不能接到user的值,能接收到Request的值
    int idParam = Convert.ToInt32(HttpContext.Current.Request.QueryString["UserID"]);
    string userNameParam = HttpContext.Current.Request.QueryString["UserName"];
    string emai = HttpContext.Current.Request.QueryString["UserEmail"];           
    List<Users> _userList = new List<Users>
    {
        new Users {UserID = idParam, UserName = userNameParam, UserEmail = emai},
        new Users {UserID = idParam, UserName = userNameParam, UserEmail = emai},
        new Users {UserID = idParam, UserName = userNameParam, UserEmail = emai}
    };
    return _userList;
}
function GetModel() {
        var user = { UserID: 11, UserName: "小张", UserEmail: "888888888@qq.com" };
        $.ajax({
            type: "get",
            url: "/api/Values/GetUserByModel",
            contentType: 'application/json',
            data: user,
            dataType: "json",
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.log(e);
            }
        });
    }

GetUri传递实体

        [HttpGet]
        public IEnumerable<Users> GetUserByModelUri([FromUri]Users user)
        {
            //能接到user的值,也能接收到Request的值
            int idParam = Convert.ToInt32(HttpContext.Current.Request.QueryString["UserID"]);
            string userNameParam = HttpContext.Current.Request.QueryString["UserName"];
            string emai = HttpContext.Current.Request.QueryString["UserEmail"];
            List<Users> _userList = new List<Users>
            {
                new Users {UserID = idParam, UserName = userNameParam, UserEmail = emai},
                new Users {UserID = idParam, UserName = userNameParam, UserEmail = emai},
                new Users {UserID = idParam, UserName = userNameParam, UserEmail = emai}
            };
            return _userList;
        }
function GetModelUri() {
        var user = { UserID: 11, UserName: "小张", UserEmail: "888888888@qq.com" };
        $.ajax({
            type: "get",
            url: "/api/Values/GetUserByModelUri",
            contentType: 'application/json',
            data: user,
            dataType: "json",
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.log(e);
            }
        });
    }

Get序列化后传递实体

        [HttpGet]
        public IEnumerable<Users> GetUserByModelSerialize(string userString)
        {
            Users user = JsonConvert.DeserializeObject<Users>(userString);
            List<Users> _userList = new List<Users>();
            _userList.Add(user);
            return _userList;
        }
function GetUserByModelSerialize() {
        var user = { UserID: 11, UserName: "小张", UserEmail: "888888888@qq.com" };
        $.ajax({
            type: "get",
            url: "/api/Values/GetUserByModelSerialize",
            contentType: 'application/json',
            data: {userString:JSON.stringify(user)},
            dataType: "json",
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.log(e);
            }
        });
    }

Get请求失败405

方法名以Get开头，WebApi会自动默认这个请求就是get请求，而如果你以其他名称开头而又不标注方法的请求方式，那么这个时候服务器虽然找到了这个方法，但是由于请求方式不确定，所以直接返回给你405——方法不被允许的错误

要养成良好习惯加上请求的方式（[HttpGet]/[HttpPost]/[HttpPut]/[HttpDelete]）

        public IEnumerable<Users> XXXXXGetUserByModelSerialize(string userString)
        {
            Users user = JsonConvert.DeserializeObject<Users>(userString);
            List<Users> _userList = new List<Users>();
            _userList.Add(user);
            return _userList;
        }
function XXXXXGetUserByModelSerialize() {
        var user = { UserID: 11, UserName: "小张", UserEmail: "888888888@qq.com" };
        $.ajax({
            type: "get",
            url: "/api/Values/XXXXXGetUserByModelSerialize",
            contentType: 'application/json',
            data: {userString:JSON.stringify(user)},
            dataType: "json",
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.log(e);
            }
        });
    }

Post请求单个参数

只接受一个参数的需要不给key才能拿到

        [HttpPost]
        public string Post([FromBody]string id)
        {
            return id;
        }
function Post() {
        var par = {
                    '':'1'
                    };
        $.ajax({
            type: "post",
            url: "/api/Values/Post",
            data: par,
            dataType: "json",
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.log(e);
            }
        });
    }

Post请求多个参数

别想了，老实用实体传吧。或者试试Jobject

Post传递实体

        [HttpPost]
        public IEnumerable<Users> PostUserModel([FromBody]Users user)
        {
            //能接到user的值,能接收到Request的值
            int idParam = Convert.ToInt32(HttpContext.Current.Request.Form["UserID"]);
            string userNameParam = HttpContext.Current.Request.Form["UserName"];
            string emai = HttpContext.Current.Request.Form["UserEmail"];
            //不能收到值
            var stringContent = base.ControllerContext.Request.Content.ReadAsStringAsync().Result;
            List<Users> _userList = new List<Users>
            {
                new Users {UserID = idParam, UserName = userNameParam, UserEmail = emai},
                new Users {UserID = idParam, UserName = userNameParam, UserEmail = emai},
                new Users {UserID = idParam, UserName = userNameParam, UserEmail = emai}
            };
            return _userList;
        }
function PostUserModel() {
        var user = { UserID: 11, UserName: "小张", UserEmail: "888888888@qq.com" };
        $.ajax({
            type: "post",
            url: "/api/Values/PostUserModel",
            data: user,
            dataType: "json",
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.log(e);
            }
        });
    }

Post序列化后传递实体

        [HttpPost]
        public IEnumerable<Users> PostUserModelSerialize([FromBody]Users user)
        {
            //能接到user的值,不能接收到Request的值
            int idParam = Convert.ToInt32(HttpContext.Current.Request.Form["UserID"]);
            string userNameParam = HttpContext.Current.Request.Form["UserName"];
            string emai = HttpContext.Current.Request.Form["UserEmail"];
            //不能收到值
            var stringContent = base.ControllerContext.Request.Content.ReadAsStringAsync().Result;
            List<Users> _userList = new List<Users>
            {
                new Users {UserID = idParam, UserName = userNameParam, UserEmail = emai},
                new Users {UserID = idParam, UserName = userNameParam, UserEmail = emai},
                new Users {UserID = idParam, UserName = userNameParam, UserEmail = emai}
            };
            return _userList;
        }

 不能写参数名称，必须写contentType

function PostUserModelSerialize() {
        var user = { UserID: 11, UserName: "小张", UserEmail: "888888888@qq.com" };
        $.ajax({
            type: "post",
            url: "/api/Values/PostUserModelSerialize",
            contentType: 'application/json',
            data: JSON.stringify(user),
            dataType: "json",
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.log(e);
            }
        });
    }

Post使用Jobject接收多个参数

        [HttpPost]
        public string PostModelObject([FromBody]JObject jData)
        {
            string idParam = HttpContext.Current.Request.Form["User[UserID]"];
            string nameParam = HttpContext.Current.Request.Form["User[UserName]"];
            string emailParam = HttpContext.Current.Request.Form["User[UserEmail]"];
            string infoParam = HttpContext.Current.Request.Form["info"];
            dynamic json = jData;
            JObject jUser = json.User;
            string info = json.Info;
            var user = jUser.ToObject<Users>();

            return string.Format("{0}_{1}_{2}_{3}", user.UserID, user.UserName, user.UserEmail, info);
        }
function PostModelObject() {
        var user = { UserID: 11, UserName: "小张", UserEmail: "888888888@qq.com" };
        var info = "this is muti model";
        $.ajax({
            type: "post",
            url: "/api/Values/PostModelObject",
            data: {User:user,Info:info},
            dataType: "json",
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.log(e);
            }
        });
    }

Put请求单个参数

只接受一个参数的需要不给key才能拿到

        [HttpPut]
        public string Put([FromBody]int id)
        {
            return "";
        }
function Put() {
        var par = {
            '': '1'
        };
        $.ajax({
            type: "put",
            url: "/api/Values/Put",
            data: par,
            dataType: "json",
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.log(e);
            }
        });
    }

Put传递实体

        [HttpPut]
        public Users PutUserModel([FromBody]Users user)
        {
            //能接到user的值,能接收到Request的值
            string idParam = HttpContext.Current.Request.Form["UserID"];
            string nameParam = HttpContext.Current.Request.Form["UserName"];
            string emailParam = HttpContext.Current.Request.Form["UserEmail"];

            //var userContent = base.ControllerContext.Request.Content.ReadAsFormDataAsync().Result;
            //不能收到值
            var stringContent = base.ControllerContext.Request.Content.ReadAsStringAsync().Result;
            return user;
        }
function PutUserModel() {        
        var user = { UserID: 11, UserName: "小张", UserEmail: "888888888@qq.com" };
        $.ajax({
            type: "put",
            url: "/api/Values/PutUserModel",
            data: user,
            dataType: "json",
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.log(e);
            }
        });
    }

Put序列化后传递实体

        [HttpPut]
        public Users PutUserModel([FromBody]Users user)
        {
            //能接到user的值，不能接收到Request的值
            string idParam = HttpContext.Current.Request.Form["UserID"];
            string nameParam = HttpContext.Current.Request.Form["UserName"];
            string emailParam = HttpContext.Current.Request.Form["UserEmail"];

            //var userContent = base.ControllerContext.Request.Content.ReadAsFormDataAsync().Result;
            //不能收到值
            var stringContent = base.ControllerContext.Request.Content.ReadAsStringAsync().Result;
            return user;
        }

 不能写参数名称，必须写contentType

function PutUserModelSerialize() {        
        var user = { UserID: 11, UserName: "小张", UserEmail: "888888888@qq.com" };
        $.ajax({
            type: "put",
            url: "/api/Values/PutUserModel",
            contentType: 'application/json',
            data: JSON.stringify(user),
            dataType: "json",
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.log(e);
            }
        });
    }

 

Put使用Jobject接收多个参数

        [HttpPut]
        public string PutModelObject([FromBody]JObject jData)
        {
            string idParam = HttpContext.Current.Request.Form["User[UserID]"];
            string nameParam = HttpContext.Current.Request.Form["User[UserName]"];
            string emailParam = HttpContext.Current.Request.Form["User[UserEmail]"];
            string infoParam = HttpContext.Current.Request.Form["info"];
            dynamic json = jData;
            JObject jUser = json.User;
            string info = json.Info;
            var user = jUser.ToObject<Users>();

            return string.Format("{0}_{1}_{2}_{3}", user.UserID, user.UserName, user.UserEmail, info);
        }
function PutModelObject() {
        var user = { UserID: 11, UserName: "小张", UserEmail: "888888888@qq.com" };
        var info = "this is muti model";
        $.ajax({
            type: "put",
            url: "/api/Values/PutModelObject",
            data: {User:user,Info:info},
            dataType: "json",
            success: function (data) {
                console.log(data);
            },
            error: function (e) {
                console.log(e);
            }
        });
    }

 HttpDelete与HttpPut是一样的就不写了

哀莫离裳
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Django使用AJAX调用自己写的API接口
weixin_33798152的博客
03-05 394
Django使用AJAX调用自己写的API接口 *** 具体代码和数据已上传到github https://github.com/PythonerKK/eleme-api-by-django-restful-framework *** 在这个例子中，我们将使用Django编写饿了么高校外卖商家查询API接口，并且使用AJAX技术来实现API接口的使用，包括使用ajax get方法加载更多数据，使...
【.Net core】ajax+.Net core Web API 场景下的请求参数传递示例
最新发布
dzxdzx341224的博客
02-29 2239
不同类型，不同参数，net core api的参数接收示例
前后端交互工具 ---- Ajax 的使用
rain67的博客
10-05 1935
如果发起请求的页面 对应的域名(域名1) 和 接收ajax请求的服务器(域名2)，如果域名1 和域名2 不相同，那么就认为是一次跨域请求。function() ，回调函数里面有两个参数，一个是data表示响应的正文body,一个是status表示响应的状态码描述信息。在服务器代码这里做一些特别的设置，就可以解开ajax不能跨域的限制。ajax为了保证安全性，要求发起ajax请求的页面，和接收ajax请求的服务器，应在同一个域名下/地址下。是一个回调函数，通过这个回调函数，拿到响应的相关信息。
大致了解了 AJAX 的基本 API
low666的博客
06-12 903
大致了解了 AJAX 的基本 API 1.概述 Web 程序最初的目的就是将信息（数据）放到公共的服务器，让所有网络用户都可以通过浏览器访问。 在此之前，我们可以通过以下几种方式让浏览器发出对服务端的请求，获得服务端的数据： 地址栏输入地址，回车，刷新 特定元素的 href 或 src 属性 表单提交 这些都是我们无法通过或者很难通过代码的方式进行编程（对服务端发出请求并且接受服务端返回的响应...
教你怎么用最原始的ajax发送post请求和get请求
郝老三~~~~~~~~~~~~~
10-07 1431
最近分配了一个小需求，修改一下官网的静态html网页，让其可以进行调用接口，获得接口返回信息，从而获得网页的动态性。
c# ajax调用webapi上传图片、传值 demo
04-26
通过以上步骤，我们可以实现C# Ajax调用WebAPI上传图片并传值的功能，同时结合图片相似度识别对比，为用户提供高效、流畅的交互体验。在实际开发中，还需要根据具体需求进行调整和优化，确保代码的健壮性和可扩展性...
调用WebApi接口上传文件
06-25
本篇将详细讲解如何在.NET MVC应用中调用WebApi接口实现文件上传。 首先，让我们了解.NET MVC和WebApi的基本概念。MVC（Model-View-Controller）是一种设计模式，用于构建可维护、可扩展的Web应用程序。它将业务...
前端调用WebAPI再调用WebService服务
11-01
该项目主要实现ajax/winform/webform三种方式通过WebAPI去调用WebService服务功能。简单易懂，WebService中主要包含的技术为APISoapHeader方法。初次接触这类技术的程序猿们可供参考。包括数据库脚本以及说明，很是...
使用Ajax调用SOAPWeb服务.docx
11-21
安全性是使用Ajax调用Web服务时必须考虑的一个重要因素。默认情况下，XML Request对象受到同源策略的限制，只能与当前页面所在域的资源进行通信。这是为了防止跨站脚本攻击(XSS)和其他安全风险。这意味着如果你的Web...
.net 后台Post，get方式调用webapi
03-26
.net 后台Post，get方式调用webapi,包括上传文件
jQuery Ajax调用Web服务代码
12-26
结合以上三个概念，"jQuery Ajax调用Web服务代码"通常是指使用jQuery的Ajax方法来与Web服务进行通信。以下是一个基本示例： ```javascript $.ajax({ url: 'http://example.com/webservice', // Web服务的URL type...
华为浏览器 ajax,ajax 访问webapi
weixin_35282782的博客
08-06 252
ajax 访问webapi 内容精选换一换说明：Web Service客户端和服务器间使用相同的编码方式，是为了防止出现乱码现象，也是实施输入校验的基础。安全加固：web server响应消息统一采用UTF-8字符编码。说明：防止非法用户登录，需在web server侧添加IP Filter过滤源IP非法的请求。安全：支持IP Filter实现Web白名单配置，配置项是“jobm公有云提供了Web...
使用jquery+ajax实现页面访问后台接口
热门推荐
qyshooter的专栏
11-04 3万+
最近接触web应用，使用struts和spring的框架，先学会使用action来实现页面的跳转。有些时候不需要切换页面，完成操作也不能够刷新页面，这种场景下，就使用ajax来实现对后台接口的调用，而在页面的js脚本中，使用jquery来调用ajax。总结一点经验。           与服务器完成交互的实际上是AJAX（Asynchronous Javascript And XML 异步 j
Ajax 发送WebAPI
longchenghui20的专栏
08-08 2433
控制器 //注意路由需要添加{action} 如果路由中并未设置，控制器根据传递的参数个数，类型以及请求方式匹配到相应的方法 直接使用api/Demo //并不需要指定方法名
webApi+Ajax传参与接收
代码改变生活
07-19 2046
1、Post请求不同类型 ///////===========dynamic $.ajax({ url: "api/Launch/Data", type: "post", data: JSON.stringify({ xml: xmlstr }), ...
C# 上传图片时 HttpContext.Current.Request.Files获取不到文件问题
ldh15879553251的博客
09-06 1万+
html代码： &lt;form class="up_form" id="upedit_form" enctype="multipart/form-data"&gt;//  注意：必须定义格式enctype="multipart/form-data"                     &lt;input type="file" id="fileOrgLogo&quot
前端如何调用c#web api，并获取数据
06-12
前端调用C# Web API 并获取数据通常可以通过以下几个步骤来实现： 1. 使用AJAX或Fetch API向Web API发送HTTP请求。在请求中指定API的URL和HTTP方法（GET、POST、PUT、DELETE等）。 2. 在请求中添加请求头（Header...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值