`

WebAPI Ajax用法

 
阅读更多

使用WebAPI:在Visual Studio 2012中新建MVC4项目,在App_Start目录下有一个WebApiConfig.cs文件,这个文件中就是相应的Web API的路由配置了。

 

先创建了一个UserModel

 

public class UserModel
{
    public string UserID { get; set; }
    public string UserName { get; set; }
}

 

然后添加Web API Controller

 

public class UserController : ApiController
{
    public UserModel getAdmin()
    {
        return new UserModel() { UserID = "000", UserName = "Admin" };
    } 
}

 

注册路由

 

public static void Register(HttpConfiguration config)
{
    config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/{controller}/{id}",
        defaults: new { id = RouteParameter.Optional }
    );
}

 

在Global中注册

 

protected void Application_Start(object sender, EventArgs e)
{
    WebApiConfig.Register(GlobalConfiguration.Configuration);
}

 

这个时候用地址栏访问地址:api/user/getadmin

 

image

 

这个时侯默认返回的是XML数据模型。

 

使用AJAX请求这个api,指定数据格式为json

 

$.ajax({
    type: 'GET',
    url: 'api/user/getadmin',
    dataType: 'json',
    success: function (data, textStatus) {
        alert(data.UserID + " | " + data.UserName);
    },
    error: function (xmlHttpRequest, textStatus, errorThrown) {
    }
});

 

alert出来的结果是:

 

image

 

这样看来,真的是dudu所说的,可以根据请求的数据类型返回指定的数据格式。

 

 

 

POST数据

 

修改一下controller,添加一个add方法

 

public bool add(UserModel user)
{
    return user != null;
}

 

只为了测试,所以这里只判断一下传入的实体是否为空,如果不为空则返回true

 

我在页面上添加了一个button,代码如下:

 

<input type="button" name="btnOK" id="btnOK" value="发送POST请求" />

 

添加JS代码

 

$('#btnOK').bind('click', function () {
    //创建ajax请求,将数据发送到后台处理
    var postData = {
        UserID: '001',
        UserName: 'QeeFee'
    };
    $.ajax({
        type: 'POST',
        url: 'api/user/add',
        data: postData,
        dataType: 'json',
        success: function (data, textStatus) {
            alert(data);
        },
        error: function (xmlHttpRequest, textStatus, errorThrown) {
        }
    });
});

 

再次运行页面

 

image

 

我们附加进程进行调试,在发送ajax请求的时候,服务器段接收到的数据如图:

 

image

 

 

 

分享到:
评论

相关推荐

    webApi、MVC、ajax分段上传文件带进度条

    本文将详细讲解如何利用WebAPI、MVC框架和AJAX技术实现大文件的分段上传,并结合进度条展示上传进度,以提供用户友好的交互体验。 一、WebAPI基础 WebAPI是微软ASP.NET框架的一部分,用于构建RESTful服务。它提供了...

    Asp.Net WebApi 上传文件方法(原生js上传和JQ ajax上传)

    以上就是使用Asp.Net WebApi结合原生JavaScript和jQuery AJAX实现文件上传的基本步骤。在实际应用中,还需要考虑错误处理、进度显示、多文件上传等复杂情况。在Dikeko.Upload.File这个文件中,可能包含了更详细的...

    WebApi系列-通过HttpClient来调用WebApi接口.doc

    ### WebApi系列-通过HttpClient来调用WebApi接口 #### 一、概述 在现代Web开发中,Web API已经成为一种非常流行的模式,用于提供服务端与客户端之间的数据交互。随着.NET Framework以及.NET Core的发展,微软提供...

    在Web API中使用jQuery AJAX实现文件上传的例子

    首先,确保安装了`Microsoft.AspNet.WebApi.Core`和`Microsoft.AspNet.WebApi.OwinSelfHost`等必要的NuGet包。然后,在`Global.asax.cs`或`Startup.cs`中,添加MVC绑定器以处理文件上传: ```csharp Global...

    c# ajax调用webapi上传图片、传值 demo

    在本文中,我们将深入探讨如何使用C#的Ajax技术来调用WebAPI接口,以便实现图片上传和值传递的功能,并且结合图片相似度识别对比。这个主题对于开发现代Web应用程序至关重要,因为它允许用户无需刷新页面就能与...

    WebAPI项目及其HTML测试页面

    WebAPI项目及其HTML测试页面是开发Web服务的一种常见方式,主要使用了Microsoft的ASP.NET框架中的WebAPI组件。WebAPI允许开发者创建RESTful服务,这些服务可以被多种客户端,包括浏览器中的JavaScript,移动应用,...

    调用WebApi接口上传文件

    在MVC应用中,可以使用jQuery或类似的库实现异步文件上传,调用WebApi接口: ```javascript $.ajax({ url: '/api/file/upload', type: 'POST', data: formData, // 包含文件的FormData对象 contentType: false,...

    .NET webapi实现文件上传功能

    2. **脚本(Script)**:使用jQuery或其他JavaScript库,监听按钮点击事件,通过AJAX调用WebAPI。 ```javascript $('#uploadButton').click(function () { var formData = new FormData($('form')[0]); $.ajax...

    WebApi-示例.rar

    WebApi 示例是一个基于C#开发的应用程序,展示了如何利用ASP.NET Web API框架构建RESTful服务。Web API是Microsoft为构建HTTP服务提供的一种高效且灵活的框架,它支持各种客户端,包括浏览器和移动设备。这个RAR文件...

    webapi demo mvc4

    - **Ajax请求**:jQuery的`$.ajax()`方法可以方便地发起异步HTTP请求,用于与WebAPI交互。 5. **项目结构**: - `WebApi_First_prj`可能包含以下关键文件夹和文件:Controllers(存放WebAPI控制器)、Models...

    请求Web Api接口

    本示例中,我们将深入探讨如何在服务端使用Web API以及客户端如何通过Ajax调用来实现跨域请求。 首先,Web API是.NET Framework的一部分,用于构建RESTful服务。REST(Representational State Transfer)是一种软件...

    MVC+WebAPI跨域调用.rar

    在IT领域,Web应用程序开发经常会遇到跨域问题,特别是在客户端(如浏览器)使用JavaScript与...通过jQuery的Ajax方法结合服务器端的CORS配置,我们可以实现客户端与WebAPI的无障碍通信,为现代Web应用开发提供了便利。

    asp net core3.1 webapi 上传功能

    使用`&lt;input type="file"&gt;`标签创建文件选择器,然后通过AJAX发送POST请求到WebAPI。 六、安全性考虑 1. 限制文件大小:为了避免恶意用户上传大量大文件导致服务器资源耗尽,应设置上传文件的大小限制。 2. 文件...

    c# MVC完整项目 EF连接数据库 webapi

    前端(View)通常使用AJAX技术调用WebAPI,实现异步数据交互。例如,使用jQuery的`$.ajax`或者现代JavaScript库(如axios或fetch)发起HTTP请求,获取或更新数据,并在页面上进行相应的显示或更新。 在实际项目中,...

    jquery mobile web api开发例子

    使用jQuery的$.ajax()方法,发起GET请求到Web API2接口,获取数据并填充到列表视图中。 ```javascript $(document).on("pageinit", "#mainPage", function () { $.ajax({ url: ...

    基于CORS实现WebApi Ajax 跨域请求解决方法

    预检请求中包含了请求方法(如POST、PUT等)、预期使用的Content-Type以及其他自定义头部信息。服务器通过返回特定的HTTP响应头来表明是否允许跨域请求,例如: - `Access-Control-Allow-Origin`: 指定哪些源可以...

    WebApi跨域访问

    在ASP.NET WebApi项目中,可以使用Microsoft.AspNet.WebApi.Cors NuGet包来添加CORS支持。首先,在项目中安装这个包,然后在WebApiConfig.cs配置文件中启用CORS: ```csharp public static void Register...

    WebAPI.ExportExcel:用于导出 Excel 的 Web API

    学习使用 WebAPI.ExportExcel 需要熟悉 ASP.NET Web API、C# 以及 JavaScript 的 AJAX 或 Fetch API。同时,对于 EPPlus 或其他 Excel 库的使用也是必要的,以便了解如何创建和填充 Excel 文件。在实际开发中,你还...

    ASP.NET WebApi_Mongodb_demo

    8. **客户端调用**:这个示例可能包含一个简单的HTML/JavaScript客户端,使用AJAX请求调用WebAPI并显示结果。也可以使用Postman等工具进行API测试。 9. **安全性考虑**:在实际应用中,我们还需要考虑身份验证、...

Global site tag (gtag.js) - Google Analytics