zoukankan      html  css  js  c++  java
  • 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;
    }

  • 相关阅读:
    程序员代码面试指南:IT名企算法与数据结构题目最优解
    经典排序算法
    Log4j输出格式控制--log4j的PatternLayout参数含义
    常用数据库4 mongodb
    常用数据库2 sqlite及SQL注入
    面试常问-数据库索引实现原理
    自定义web框架
    HTML|CSS之布局相关总结
    C++模板类练习题
    C++中的运算符重载练习题
  • 原文地址:https://www.cnblogs.com/yagamilight/p/10624976.html
Copyright © 2011-2022 走看看