WebApi前端调用

HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
<input type="button" id="btnUserlist" value="查询用户信息">
<div id="UsersListDiv" style="width:300px;height: 200px;border: 1px solid gray;"></div>
</body>
</html>

备注：获取整张表的数据,使用for循环或foreach遍历

<script>
// Ajax异步请求,查询列表信息，因为返回的是泛型集合，直接for循环取值
$(function() {
$("#btnUserlist").click(function() {
$.ajax({
type: 'get', //Http请求类型
url: 'https://localhost:44304/api/Values',
dataType: 'json', //服务器返回json数据类型
data: {},
success: function(data) {
var a = "";
for (var i = 0; i < data.length; i++) {

a += "," + data[i].Name;
}
$("#UsersListDiv").html("您查询的结果为：" +a);
},
error: function() {
alert("请求失败！");
},
complete: function() {
alert("回调");
}
});
});
});
</script>

获取单条数据：在data里面传参，不需要遍历，直接通过data.Name来取值

<script>
// Ajax异步请求，查询单条信息，直接在data中传参，取值直接使用data.Name取值
$(function() {
$("#btnUserlist").click(function() {
$.ajax({
type: 'get', //Http请求类型
url: 'https://localhost:44304/api/Values',
dataType: 'json', //服务器返回json数据类型
data: {
id: 10000
},
success: function(data) {
$("#UsersListDiv").html("您查询的结果为：" +data.Name );
},
error: function() {
alert("请求失败！");
},
complete: function() {
alert("回调");
}
});
});
});
</script>

<script>
// Ajax异步请求，修改数据前端代码
$(function() {
$("#btnUserlist").click(function() {
$.ajax({
type: 'post', //Http请求类型
url: 'https://localhost:44304/api/Values/UpdateUser/10000',
data: {
Id:10000,
Name:"周宇菲",
Age:5,
Sex:"女"
},
success: function() {
alert("修改成功");
},
error: function() {
alert("请求失败！");
},
complete: function() {
alert("回调");
}
});
});
});
</script>

// PUT api/values/5 修改数据后台代码
[HttpPost]
public void UpdateUser(int id, [FromBody]User value)
{
foreach (User item in UsList)
{
if (id== item.Id)
{
item.Name = value.Name;
item.Sex = value.Sex;
item.Age = value.Age;
}
}
}

前端调用解决跨域问题固定代码：

在服务端的Web.config的 </handlers>下面添加以下固定代码

<!--解决跨域问题-->
<httpProtocol>
<customHeaders>
<clear />
<add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET" />
<add name="Access-Control-Allow-Headers" value="Content-Type,Token" />
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>

备注：获取整张表的数据,使用for循环或foreach遍历

WebApi的前端调用的更多相关文章

  1. WebApi的调用-1.前端调用

    前端调用 html <div class="row"> <form id="queryForm"> <input name=&qu ...

  2. 前端调用后端的方法(基于restful接口的mvc架构)

    1.前端调用后台: 建议用你熟悉的一门服务端程序,例如ASP,PHP,JSP,C#这些都可以,然后把需要的数据从数据库中获得,回传给客户端浏览器(其实一般就是写到HTML中,或者生成XML文件)然后在 ...

  3. Nginx解决前端调用后端接口跨域问题

    1.项目中遇到的问题描述: 前端调用zuul统一网关服务接口,请求状态码200,但是无返回数据. 浏览器控制台报错信息:No  Access-Control-Allow-Origin header i ...

  4. 【天坑】ASP.net WebAPI跨域调用问题

    最近在做一个项目,前端是VUE,后端是WebAPI,业务也就是一些实体的增删改查.在项目开始的时候我就预计到有跨域的问题,所以也找了一下资料,在Web.Config里面加上了配置信息: <htt ...

  5. Asp.net WebApi Put模式调用，“HTTP 错误 405.0 - Method Not Allowed”解决方法

    IIS10.0在部署了WebAPI之后,默认是不支持Put模式调用的.需要按照下面方法启用. 步骤一:在IIS管理界面要支持Put模式的IIS站点,选择 "功能视图". 步骤二:选 ...

  6. (跨平台)cocos2d-x C++ or Object-C(前端)调用C# webservices(后台)，实现交叉编译到Android/IOS/WinPhone等移动终端设备

    1.2014年4月2号算是正式找到自己的实习工作-杭州美迪软件有限公司(移动物联事业部)合作于:四川管家婆总部移动终端代理,由于在校选编程专业语言C#和在浙大网新培训课程(C#.Asp.net开发)缘 ...

  7. 使用wcf编写坐标字符串生成shapefile文件，在iis发布供前端调用

    项目有一需求,需要由坐标字符串(格式:x,y,点名)生成shapefile,由于在前台开发类似功能比较麻烦而且也不适用,最终决定使用WCF来实现,不借助现有GIS软件,基于GDAL实现. 实现过程如下 ...

  8. JS前端调用后台方法

    //JS前端代码function Exportqmdltb() { var areavalue= GetQmdltmValue(); $.ajax({ type: "post", ...

  9. 【Python】【Flask】前端调用后端方法返回页面

    后端代码: @app.route("/test",methods=['POST','GET']) def test(): return "我是测试的" 前端代码 ...

随机推荐

  1. 「后端小伙伴来学前端了」Vuex进阶操作，让你的代码更加高效（简称如何学会偷懒 【手动狗头】）

    学妹手机里的美照 前言 前一篇写了Vuex基本使用,用起来还稍稍有些繁琐,代码有很多 冗余的地方,这篇就带着大家用更简单的方式来使用Vuex(其实就是怎么更好的偷懒,用更少的代码来完之前的事情) 进入 ...

  2. 待办事项-redis

    package com.easyagu.liwei.util;import redis.clients.jedis.BinaryClient;import redis.clients.jedis.Je ...

  3. Yet Another Minimization Problem

    Yet Another Minimization Problem 一个很显然的决策单调性. 方程是很显然的 $ f_i = \min{f_{j-1} + w(j,i)} $ . 它具有决策单调性,可以 ...

  4. 【机器学习与R语言】3-概率学习朴素贝叶斯（NB）

    目录 1.理解朴素贝叶斯 1)基本概念 2)朴素贝叶斯算法 2.朴素贝斯分类应用 1)收集数据 2)探索和准备数据 3)训练模型 4)评估模型性能 5)提升模型性能 1.理解朴素贝叶斯 1)基本概念 ...

  5. 基因组共线性分析工具MCScanX

    软件简介 MCScanX工具集对MCScan算法进行了调整,用于检测共线性和同线性区域,还增加了可视化和下游分析..MCscanX有三个核心工具,以及12个下游分析工具. 软件安装 进入官网http: ...

  6. MAC——解决问题：打不开，因为它来自身份不明的开发者

    今天在mac电脑上,下载了一个软件,是从某个网页上下载的,点击却不能打开,弹出窗口提示说"打不开xx,因为它来自身份不明的开发者",怎么解决?下面来看下. 方法/步骤     点击 ...

  7. C++20协程实例：携程化的IOCP服务端/客户端

    VC支持协程已经有一段时间了,之前一直想不明白协程的意义在哪里,前几天拉屎的时候突然灵光一闪: 以下是伪代码: task server() { for (;;) { sock_context s = ...

  8. Java偏向锁浅析

    偏向锁的定义 顾名思义,偏向锁会偏向第一个访问锁的线程. 如果在接下来的运行过程中,该锁没有被其他线程访问,这持有偏向锁的线程将永远不需要同步 如果在运行过程中,遇到了其他线程抢占锁,则持有偏向锁的线 ...

  9. MapReduce的类型与格式

    MapReduce的类型 默认的MR作业 默认的mapper是Mapper类,它将输入的键和值原封不动地写到输出中 默认的partitioner是HashPartitioner,它对每条记录的键进行哈 ...

  10. 数仓day01

    1. 该项目适用哪些行业? 主营业务在线上进行的一些公司,比如外卖公司,各类app(比如:下厨房,头条,安居客,斗鱼,每日优鲜,淘宝网等等) 这类公司通常要针对用户的线上访问行为.消费行为.业务操作行 ...