2017-10-26  2,941 views 2

EchoPost Ajax Post插件 a标签实现post提交 更新1.0.2

 标签:        
插件名称 插件名称:EchoPost
版本号 1.0.2
依赖项 依赖项:jQuery 1.8或以上、layer
开发人 落雨Echo
联系方式 549635203@qq.com

EchoPost JS 解放您的双手,一行代码让A标签实现Post请求

下载地址:echopost 1.0.2.zip

1、基础使用方法

$(function () {
    $('body').echopost();
})

 

1)引入layer.css、jQuery.js、layer.js、echopost.js,引用js时需要注意顺序,需要按照上述顺序来。

2)jQuery全局事件中对echopost进行全局绑定,如下:

3)需要注意的是后台返回的数据必须是定义好的数据类型:

 

数据格式如下

BaseReuest

属性值 属性类型 默认值 说明
Code Int 0 Code为状态码,默认状态码见状态码表,可自定义
Message String ‘’ 返回的消息
Result T Default(T) 需要返回的数据,可以为空

 

状态码 状态描述
0 正常
10001 未传入键或键非法
10002 相关数据已存在
10003 相关数据不存在
10004 暂不支持此操作
10005 存在未传入的必传参数
10006 传入参数超出范围
10007 SQL执行未知错误
10008 未知错误类型
10009 数据存在问题

 

3、属性及值描述

属性名称 属性值描述
action-url 需要post的后台方法,可包含地址参数
redirect-url 成功后跳转的地址
confirm-msg 提交确认确认信息
form-content 如果需要提交的是一个表单,则需要次属性,需要提交的表单内容必须包含在此class内
param True

 

4、使用案例

1)Form表单提交

案例实现账号,密码,性别 Post提交

前端代码(View):

<html>
<head>
    <title>EchoPost</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/layer.css" rel="stylesheet" />
    <style>
        body {
            padding: 10px;
        }

        input[type=text], input[type=password] {
            width: 360px;
        }
    </style>
</head>
<body>
    <div class="formAccount">
        <p>账号<input type="text" class="form-control" name="Account" value="" param="true" /></p>
        <p>密码<input type="password" class="form-control" name="Password" value="" param="true" /></p>
        <p>
            性别
            <div><label for="Gender"><input type="radio" name="Gender" class="Gender" value="1" param="true" checked="checked" />男</label><label for="Gender"><input type="radio" name="Gender" class="Gender formContent" value="1" param="true" />女</label></div>
        </p>
    </div>
    <p><a class="btn btn-success echo-post echo-confirm" action-url="/Demo/Edit" form-content="formAccount" redirect-url="/Demo/Index" confirm-msg="确认要提交吗?">提交</a></p>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/layer.js"></script>
    <script src="~/Scripts/echo/echopost-1.1.2.min.js"></script>
    <script>
        $(function () {
            $('body').echopost();
        })
    </script>
</body>
</html>

后端代码(Controller):

/// <summary>
/// 添加/编辑账号
/// </summary>
/// <param name="entity">Demo类型实体对象</param>
/// <returns></returns>
[HttpPost]
public JsonResult Edit(Demo entity)
{
    #region + 业务操作
    Thread.Sleep(2000);
    #endregion

    //返回消息(状态、消息、数据) Result可以为空
    //可直接实例化BaseRequest,也可直接new object
    //return Json(new { Code = 0, Message = entity.Account + "添加成功"});
    return Json(new BaseRequest<object>
    {
        Code = 0,
        Message = entity.Account + "添加成功"
    });
}

实现效果:

2)列表页A标签请求删除:

前端代码(View):

<html>
<head>
    <title></title>
    <link href="~/Content/layer.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <table class="table table-bordered table-hover table-responsive">
        <tr>
            <th>账号ID</th>
            <th>账号名</th>
            <th>添加时间</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>zhangsan</td>
            <td>2017-10-26</td>
            <td><a class="echo-post echo-confirm" action-url="/Demo/Delete?id=1" redirect-url="/Demo/List" confirm-msg="确认是否删除该行数据?">删除</a></td>
        </tr>
    </table>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/layer.js"></script>
    <script src="~/Scripts/echo/echopost-1.1.2.min.js"></script>
    <script>
        $(function () {
            $('body').echopost();
        })
    </script>
</body>
</html>

后端代码(Controller):

/// <summary>
/// 删除账号
/// </summary>
/// <param name="id">账号主键</param>
/// <returns></returns>
[HttpPost]
public JsonResult Delete(int id)
{
    Thread.Sleep(2000);
    //return Json(new { Code = 0, Message = "ID:"+id+"删除成功", Result = id });
    return Json(new BaseRequest<int>
    {
        Code = 0,
        Message = "ID:" + id + "删除成功",
        Result = id
    });
}

实现效果:

2 条留言  访客:1 条  博主:1 条

  1. bushadie

    这个对 js 动态添加的a标签无效吧

    • 51softs 博主

      @bushadie 其实是可以的,暂时没做支持,稍微修改下做个监听就行了

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: