<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>弹出层和ajax数据交互</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:Button ID="btn_Select" runat="server" Text="检索" class="btnok" OnClick="btn_Select_Click"

            Style="margin: 0" />

        <a href="javascript:" onclick="addInfo();">添加</a>

        <!--隐藏着的添加层,在添加事件中被弹出-->

        <div class="conLi" style="display: none; height: 100%;" id="shows">

            <div class="topder">

                <h4>

                    添加工作计划</h4>

            </div>

            <div class="lbContent">

                <table class="tabCon">

                    <tr>

                        <td>

                            <span>员工：</span>

                        </td>

                        <td>

                            <asp:DropDownList ID="Ddl_user" runat="server" CssClass="DropDownList">

                            </asp:DropDownList>

                        </td>

                        <td>

                            <span>任务量：</span>

                        </td>

                        <td>

                            <asp:TextBox ID="tb_Count" runat="server" CssClass="InpShadow InpW">0</asp:TextBox>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <span>岗位：</span>

                        </td>

                        <td>

                            <asp:TextBox ID="tb_gangwei" runat="server" CssClass="InpShadow InpW"></asp:TextBox>

                        </td>

                        <td>

                            <span>截止日期：</span>

                        </td>

                        <td>

                            <input id="tb_time" runat="server" readonly="true" class="Wdate intest InpShadow InpW2"

                                style="width: 186px; height: 22px; cursor: pointer" onfocus="WdatePicker()" />

                        </td>

                        <td>

                        </td>

                    </tr>

                </table>

            </div>

            <div class="lbFooter">

                <asp:Button ID="Btn_Tijiao" runat="server" Text="提交" CssClass="flat floatR" OnClientClick="return valiedate();" />

                <input type="button" class="flat floatR" onclick="CancleDiv();" value="取消" />

            </div>

        </div>

    </div>

    </form>

</body>

</html>

<script type="text/javascript" src="../Js/jquery-1.7.min.js"></script>

<script src="../Js/jquery.blockUI.js" type="text/javascript"></script>

<script src="../DatePicker/WdatePicker.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

    //添加事件

    function addInfo() {

        $.blockUI({ message: $('#shows') }); //弹出层

    }

    //关闭弹出层

    function CancleDiv() {

        $.unblockUI();

    }

    //弹出层的提交事件

    function valiedate() {

        //先非空判断

        var ugangwei = document.getElementById("tb_gangwei").value;

        if (ugangwei == "") {

            alert("岗位不能为空！");

            return false;

        }

        var udate = document.getElementById("tb_time").value;

        if (udate == "") {

            alert("截止日期不能为空！");

            return false;

        }

        var uCount = document.getElementById("tb_Count").value;

        if (uCount < ) {

            alert("任务量输入有误！");

            return false;

        }

        var uName = document.getElementById("Ddl_user").value;

        //通过ajax和后台来对数据进行交互。

        $.ajax({

            type: "post",

            url: "RS_gongzuoliang.aspx/UpdateUserJH",

            data: '{ugangwei:"' + ugangwei + '",udate:"' + udate + '",uCount:"' + uCount + '",uName:"' + uName + '"}',

            contentType: "application/json; charset=utf-8",

            async: false,

            cache: false,

            success: function(msg) {

                if (msg.d == "ok") {

                    alert("操作成功！");

                    $("#btn_Select").click();

                    $.unblockUI(); //关闭弹出层

                }

                else {

                    alert("操作失败！");

                    $.unblockUI(); //关闭弹出层

                }

            }

        });

    }

</script>

后台：

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using System.Web.Services;

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

    }

　　UserB ub = new UserB();
   //通过ajax来处理数据

    [WebMethod]

    public static string UpdateUserJH(string ugangwei, string udate, string uCount, string uName)

    {

        UserB ub = new UserB();

        int i = ub.AddRenWu(uName, uCount, ugangwei, Convert.ToDateTime(udate), DateTime.Now);

        if (i > )

        {

            return "ok";

        }

        return "error";

    }

}

弹出层和ajax数据交互的更多相关文章

  1. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  2. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  3. JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  4. JS实现弹出层对话框

    点击按钮后,弹出层对话框,可交互,点击关闭后才关闭掉对话框. 效果图: 源码: <!doctype html> <html> <head> <meta cha ...

  5. 权限管理系统之LayUI实现页面增删改查和弹出层交互

    由于对LayUI框架不太熟悉,昨天抽空看了下LayUI的文档,今天在网上找了使用LayUI进行增删改查相关内容,自己照葫芦画了个瓢,画瓢部分不是很难,主要是下午遇到了一个弹出层的问题耗时比较久. 同一 ...

  6. layui在open弹出层回显，解决动态select数据回显问题

    //监听数据表格工具条         table.on('tool(contentList)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 l ...

  7. Lyaer 单弹出层获取数据

    案例完整代码如下 var cls = layer.open({                title: "请选择被换班人",                type: 2,   ...

  8. wuzhicms上传弹出层，如何返回数据到当前页面？

    我们要实现下面功能: 上传图片后,返回图片列表到页面: 点击开始上传后,自动返回结果到页面. 原理:通过openiframe打开上传弹出层. 其中: returntype 在这里是 2 www/res ...

  9. jQuery layer弹出层插件 http://layer.layui.com/直接上官网学

    在许多网站中,经常用到弹出层,有时候为了达到更好的用户体验,你将写繁琐的css跟js,这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件.layer侧重于用户灵活的自定义,为不 ...

随机推荐

  1. magento

     打开 magento/app/code/core/Mage/Core/Model/Session/Abstract/varien.php//if (isset($cookieParams['doma ...

  2. 关于前后台交互生成json区别

    如何返回[object{xx:{}}]这种数组型json在服务器端return $arr[]=m;像这种都可以产生[Object { 0="9", 1="8", ...

  3. 常用 linux 命令(部分)

    常用命令总结: 1. mkdir命令 mkdir dirname , 用来创建目录.该命令创建由dirname命名的目录.如果在目录名的前面没有加任何路径名,则在当前目录下创建由dirname指定的目 ...

  4. Sql Server中通配符

    Sql Server中通配符的使用 通配符_ "_"号表示任意单个字符,该符号只能匹配一个字符."_"可以放在查询条件的任意位置,且只能代表一个字符.一个汉字只 ...

  5. Java Convert String & Int

    To convert a int to string: int num = 123; String str = String.valueOf(num); To convert a string to ...

  6. :first与:first-child的区别

    说的简单,:first表示单个元素,:fisrt-child表示的多个元素(集合). 如果追求深一点的话, 1.$(:first).css()表示全局或局部全局的第一个,也就是表示单个元素 2.$(: ...

  7. JQuery：通过noConflict()方法同时使用jQuery 和其他框架

    jQuery - noConflict()方法 一.如何在页面上同时使用 jQuery 和其他框架?jQuery 和其他 JavaScript 框架正如您已经了解到的,jQuery 使用 $ 符号作为 ...

  8. 花式玩转社交App，百变应用场景

    活动概况 时间:2016年03月20日13:30-16:30 地点:深圳腾讯大厦2楼多功能厅(南山区科技园科技中一路) 主办:APICloud.腾讯云分析和信鸽.云之讯 报名链接:http://act ...

  9. iptables调试方法

    iptables调试时,使用到raw表.ipt_LOG内核模块.日志记录在kern.log中. 具体的步骤如下: 1.准备ipt_LOG内核模块 modprobe ipt_LOG 2.使用raw表,加 ...

  10. PHP中用下划线开头的变量含义

    http://blog.csdn.net/zlking02/article/details/6752256 一个下划线是私有变量以及私有方法两个下划线是PHP内置变量. https://segment ...