码迷,mamicode.com
首页 > Windows程序 > 详细

layui表单提交与ajax访问webapi

时间:2019-03-30 01:03:26      阅读:897      评论:0      收藏:0      [点我收藏+]

标签:lse   单选   北京   重置   url   重要   toc   表单   标题   

啊啊啊啊 这个东西实在很蛋疼啊 每次访问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

标签:lse   单选   北京   重置   url   重要   toc   表单   标题   

原文地址:https://www.cnblogs.com/yagamilight/p/10624976.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!