layui表单提交与ajax访问webapi
啊啊啊啊 这个东西实在很蛋疼啊 每次访问webapi就很老火 这里就一下 以后忘记的话就来查阅
不多说 直接开始
首先html页面 新建一个基于layui的form表单页面LayuiForm.cshtml(我的项目是基于mvc的 当然webform也是可以的 就不写了 个人习惯webform做前台的时候后台用一般处理程序.ashx来搭配)。
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>LayuiForm</title>
<link href="~/Scripts/layui/css/layui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/layui/layui.js"></script>
</head>
<body>
<form class="layui-form" action="" method="post">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-inline">
<input type="text" name="fnTitle" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<input type="password" name="fnPassWord" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-inline">
<select name="fnCity" lay-verify="required">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-inline">
<input type="radio" name="fnSex" value="男" title="男">
<input type="radio" name="fnSex" value="女" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-inline">
<textarea name="fnSumarry" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script>
layui.use('form', function () {
var form = layui.form;
form.on('submit(formDemo)', function (data) {
//alert(JSON.stringify(data.field));
$.ajax({
type: "post",
url: "/api/WebApi/PostAddFormLearn",
data: data.field,
success: function (responseTxt) {
if (responseTxt.msg == "OK") {
layer.msg("提交成功");
} else {
layer.msg("提交出错");
}
}
});
return false;
});
});
</script>
</body>
</html>
前台页面建好了 这里有一个很重要的一点 假如你的表单不指定他的提交方式的话（即method = "post"或者method="get"） html默认的提交方式是get.
我们这里采用的是post方法 接下来 在webapi中新建方法接受参数。
后台方法：
public IHttpActionResult PostAddFormLearn(FormLearning f)
{
try
{
LearningEntities db = new LearningEntities();
db.FormLearning.Add(f);
db.SaveChanges();
return Ok(new { msg = "OK" });
}
catch (Exception ex)
{
return Ok(new { msg=ex.Message});
}
finally
{
}
}
这里有个需要注意的点 ，在访问webapi接口的时候 如果访问post 而且只有一个参数的情况下 需要用到frombody关键字。
对访问webapi我做了几个例子放在这里方便对比
第一种：不带参数的get 请求。
前台：
$("#test1").click(function () {
$.ajax({
type: "get",
url: "/api/WebApi/getList",
success: function (responseText) {
alert(responseText);
}
});
});
后台：
public string getList()
{
return "ok";
}
第二种：一个参数的get请求
前台：
$("#test2").click(function () {
var parm = 1;
$.ajax({
type: "get",
url: "/api/WebApi/getListWithOneParm",
data: { id: parm },
success: function (responseText) {
alert(responseText);
}
});
});
后台：
public string getListWithOneParm(int id)
{
return id.ToString();
}
第三种：多个参数的get请求
前台：
$("#test3").click(function () {
var parm = { "Name": "张丽", "Sex": "男" };
$.ajax({
type: "get",
url: "/api/WebApi/getListWithThreeParm",
data: parm,
success: function (responseText) {
alert(responseText);
}
});
});
后台：
public string getListWithThreeParm(string Name, string Sex)
{
return "Name:" + Name + "," + "Sex:" + Sex;
}
接下来是post的各种恶心的东西。。。
继续
第一种 不带参数的post请求
前台：
$("#test4").click(function () {
$.ajax({
type: "post",
url: "/api/WebApi/PostList",
success: function (responseText) {
alert(responseText);
}
});
});
后台：
public string PostList()
{
return "ojbk";
}
第二种 带有一个参数的post
前台：
$("#test5").click(function () {
$.ajax({
type: "post",
data: { "name": "张三" },
url: "/api/WebApi/PostListOneparm",
success: function (responseText) {
alert(responseText);
}
});
});
后台：
public string PostListOneparm([FromBody]string name)
{
return "OKAA";
}
第三种：
带多个参数的post （其实就是当作传进来一个类接受就行了）
前台：
$("#test6").click(function () {
var parm = {"name":"zhangsan","age":20}
$.ajax({
type: "post",
data: parm,
url: "/api/WebApi/PostListThreeparm",
success: function (responseText) {
alert(responseText);
}
});
});
后台：
public string PostListThreeparm(Person p)
{
return p.name;
}
layui表单提交与ajax访问webapi的更多相关文章
- LayUI表单提交不走ajax原因
在使用layui的时候.遇到一个问题.提交表单,没有走ajax,直接提交了表单页面. 原因是因为JQuery未引入 解决办法.引入JQuery或者使用layui自带Jquery var $ = lay ...
- layui表单提交
关于layui表单提交 只是简单用一个文本框记录一下提交过程 其他的如下拉框选择框样式可以参考官网 下面直接开始.首 一:前台页面 <!DOCTYPE html><html& ...
- Form表单提交，Ajax请求，$http请求的区别
做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...
- form表单提交与ajax消息传递
form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...
- form表单提交和ajax表单提交，关于移动端如何通过软键盘上的【搜索】和【前进】进行提交操作
[文章来源]由于自己对于form研究甚少,所以一直用的都是AJAX进行提交,这次后台提出要用form提交,顺便深入研究一下:之前在做表单的时候,发现input可以通过设置不同的type属性,调用不同的 ...
- EXT4.1表单提交(非AJAX)
Ext.require([ 'Ext.form.*', 'Ext.data.*' ]); Ext.onReady(function(){ Ext.apply(Ext.form.VTypes, { re ...
- form表单提交转为ajax方式提交
<form action="xxx" method="get"> //action的值是请求的url地址 <div class="f ...
- layui表单提交使用form.on('submit(sub)',function (){}) 使用ajax请求时回调不执行的原因及解决方法
ayui使用官方的表单模块form.on('submit(sub)',function (){}) 提交,使用ajax请求向后台请求一个执行结果,根据结果进行处理,出现回调无法执行,并且页面出现了刷新 ...
- 学习笔记_springmvc返回值、数据写到页面、表单提交、ajax、重定向
数据写到页面 后台往前台传数据 TestController添加 /** * 方法的返回值采用ModelAndView, new ModelAndView("index", map ...
随机推荐
- windows server2008 r2激活
KMS激活: 管理员运行cmd 输入以下命令 slmgr /ipk 密钥slmgr /skms zh.us.toslmgr /atoslmgr /xpr 可用密钥如下: KMS Windows Ser ...
- [java进阶]关于多线程的知识点
线程和进程的区别? 进程: 是程序得一次之星过程,是系统运行程序的基本单位,因此进程是动态的.系统运行一个程序就是从一个进程的创建开始,到进程的结束的过程. 在java中当我们的main函数运行时就是 ...
- 2017年 实验五 B2B模拟实验
实验五 B2B模拟实验 [实验目的] ⑴.掌握B2B中供应商的供求信息发布.阿里商铺开设和订单交易等过程. ⑵.掌握B2B中采购商的采购信息的发布.交易洽谈.网上支付和收货等过程. [实验条件] ⑴ ...
- 2014年 实验一 C2C个人拍卖
实验一 C2C个人拍卖 --实战淘宝 [实验目的] 掌握网上拍卖的基本流程和拍卖平台的运营 [实验条件]⑴.个人计算机一台 ⑵.计算机通过局域网形式接入互联网. ⑶.常用浏览器. [知识准备] 本实 ...
- java性能分析之火焰图
原由 最近因为kafka.zookeeper.ES和相关的Java应用的内存问题搞的头大,做运维将近4年,对Java调优.性能方面的知识了解的少之又少,是时候下定决心来对他多一个学习了.不能一口吃成一 ...
- react中 受控组件和 非受控组件 浅析
一 受控组件 顾名思义,受控 也就是能够被控制,简而言之也就是 该组件ui的显示或者内部state逻辑的变化依赖外部的 props的传入. 二 非受控组件 顾名思义,非受控,也就是内部的视图变化,st ...
- Storage API简介和存储限制与逐出策略
目录 简介 常用的客户端存储方式 data storage的类型 逐出策略 Storage API estimate persist persisted 综合使用 总结 简介 对于现代浏览器来说,为了 ...
- windows注册redis为服务,zookeeper为服务
windows注册redis为服务,zkserver为服务 1.redis部分 通过redis内置工具安装 进入redis安装目录 1.shift+鼠标右键打开菜单,点击"在此处打开命令窗口 ...
- Linux入门到放弃之五《用户管理》
用户管理 1.创建新用户user123,以此用户登陆系统,在tmp下创建文件test123: 2.修改test123文件的所有者为root,所属组也为root: 需要先切换为root用户 3.修改te ...
- java中true不是关键字？
java中true ,false , null在java中不是关键字,也不是保留字,它们只是显式常量值,但是你在程序中不能使用它们作为标识符. 其中const和goto是java的保留字.java中所 ...