MVC下通过jquery的ajax调用webapi
如题
jquery的应用，不会的自己去补。
创建一个mvc项目，新建控制器、视图如下：
其中data控制器负责向前台提供数据，home控制器是一个简单的访问页控制器。
data控制器代码如下：
public class DataController : Controller
{
[HttpGet]
public ActionResult GetById(int id)
{
id++;
return Content(id.ToString());
}
}
很简单，作为一个webapi，送进来一个数字，加一返回。
返回的content上课也讲过，忘了的去看书上控制器中action的返回类型。
index页面代码如下：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div id="div1">
<input type="text" id="test1" /><br />
<input type="text" id="test2" value="" /><br />
<input type="button" id="test3" value="提交" onclick="justdo()" />
</div>
<script src="~/jquery-3.4.1.min.js"></script>
<script language="javascript">
function justdo() {
$.ajax(
{
url: "/Data/getbyid/" + $("#test2").val(),
type: "get",
success: function (result) {
$("#test2").val(result);
}
});
}
$(document).ready(function () {
setInterval(justdo, );
});
</script>
</body>
</html>
按钮、计时器都可以触发justdo中的ajax请求，刷新页面内容。
运行结果：
不断变化：
本例一方面提了一下jquery中ajax的用法，主要展现了现代通用的的一种数据传送模式--webapi。
如果新建的mvc项目没有视图，而是以其他形式（字符串等等，json字符串尤其常见）返回各个应用需要的结果，它就可以作为一种“网页形式调用的应用程序接口”存在，即webapi。
需要注意的是，如果webapi和调用它的内容不在同一个网站内，需要设置“同源”，可自行上网找资料。
MVC下通过jquery的ajax调用webapi的更多相关文章
- 基于jQuery的ajax对WebApi和OData的封装
基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...
- 使用JQuery的Ajax调用SOAP-XML Web Services（Call SOAP-XML Web Services With jQuery Ajax）（译+摘录）
假设有一个基于.Net的Web Service,其名称为SaveProduct POST /ProductService.asmx HTTP/1.1 Host: localhost Content-T ...
- Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
原文:Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇) 老话说的好:好记心不如烂笔头! 本着这原则,我把最近工作中遇到的jquery利用ajax调用web服务的 ...
- jQuery的ajax对WebApi和OData的封装
基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...
- 使用Jquery的Ajax调用
最近在学习web开发,试用了一下Jquery的ajax调用. 首先,新建一个MVC4的项目,在HomeController.cs中添加一个Action,命名为GetData, 通过这个为ajax提供数 ...
- Asp.net中JQuery、ajax调用后台方法总结
通过上一篇文章实例的实现,整个过程当中学习到很多知识点,了解了Jquery.Ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了.灵活运用: 1.有 ...
- 使用jQuery的ajax调用action的例子
直接使用ajax请求会比较繁琐,但是jQuery为我们提供了简单使用ajax的方法. 下面是一个在jQuery easyUI中,利用ajax请求,使下拉菜单关联文本框的例子.其中ajax请求就是8-1 ...
- ajax调用WebAPI添加数据
//获取账号名 var Name = document.getElementById("Text1").value;//获取密码 var Pass = document.getEl ...
- Struts1.x下使用jquery的Ajax获取后台数据
jquery中有多种Ajax方法来获取后台数据,我使用的是$.get()方法,具体的理论我不解释太多,要解释也是从别的地方copy过来的.下面就介绍我的项目中的实现方法. 前台页面: ...
随机推荐
- Windows Server 2016-Hyper-V Replica副本功能介绍
Hyper-V副本是一种可用于复制虚拟机的功能,作为业务连续性解决方案的一部分.从Windows Server 2012中,Hyper-V角色引入了Hyper-V Replica作为虚拟机的内置复制机 ...
- day9_7.9 函数的定义
一.基础 1.什么是函数? 函数就是工具,方便开发人员开发软件,非常简洁的工具. 函数的关键字是def 在函数的编写阶段,只检验其语法是否正确,不检验代码. 在函数的调用阶段,可以通过函数名+()来调 ...
- woocommerce如何隐藏SKU
有时我们不想在woocommerce网站前台显示SKU,如下图所示,因为sku一多整个排版可能会乱,那么要如何隐藏sku呢?随ytkah一起来看看 在当前主题的function.php文件中加入如下代 ...
- SpringCloud介绍（一）
Spring Cloud 是一套完整的微服务解决方案,基于 Spring Boot 框架,准确的说,它不是一个框架,而是一个大的容器,它将市面上较好的微服务框架集成进来,从而简化了开发者的代码量. 一 ...
- keil mdk+stm32的ac5和 ac6两个编译器下的字节对齐操作方法
最近在使用ac6.9的编译器,编译速度是真的很快,使用stm32的hal库编译速度也比ac5的编译器快很多.本文试验stm32中字节对齐的代码测试,主要是结构体,因为结构体中实际项目中用到最多,同时在 ...
- html表格及列表
表格的属性: border:边框 cellpadding:内边距 单元格边框跟内容之间的间距 cellspacing:外边距 单元格跟单元格之间的距离 align:表格的对其样式 width:宽度 ...
- elasticsearch 7.5.0 学习笔记
温馨提示:电脑端看不到右侧目录的话请减小缩放比例. API操作-- 新建或删除查询索引库 新建索引库 新建index,要向服务器发送一个PUT请求,下面是使用curl命令新建了一个名为test的ind ...
- Computer-Hunters——冲刺总结
Computer-Hunters--冲刺总结 一.作业相关 作业相关 具体描述 所属班级 2019秋福大软件工程实践Z班 作业要求 团队作业第五次-项目冲刺 作业正文 hunter--冲刺总结 团队名 ...
- 作业帮：给定一个整数数组，找出其中两个数相加等于目标值（去重set）
题目描述 给定一个整数数组,找出其中两个数相加等于目标值 输入 [1,3,5,7,9,11] 10 输出 1,9 3,7 代码: import java.util.HashMap; import ja ...
- JVM系列之三：类装载器子系统
0. JVM架构图 Java虚拟机主要分为五大模块:类装载器子系统.运行时数据区.执行引擎.本地方法接口和垃圾收集模块. 1. 类的加载 虚拟机类装载器子系统:虚拟机把描述类的数据从class文件加载 ...