<%@ 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. svn利用TortoiseSVN忽略文件或文件夹

    忽略已经版本控制的文件 如果你不小心添加了一些应该被忽略的文件,你如何将它们从版本控制中去除而不会丢失它们?或许你有 自己的IDE配置文件,不是项目的一部分,但将会花费很多时间使之按照自己的方式工作. ...

  2. Estimating Project Costs

    The Wideman Comparative Glossary of Common Project Management Terms describes estimating cost as, &q ...

  3. Ubuntu 一键安装pptp

    手工配置完开始能用,后来被机房停机之后无法恢复,下面文章介绍的使用脚本简单好用,感谢作者,下面是链接: http://blog.sina.com.cn/s/blog_6e7bae020102v8wm. ...

  4. Windows-006-映射网络驱动器图文详解

    此文主要讲述 Win7 中,如何映射网络驱动器,一般用于网络共享时.敬请亲们参阅,若有不足之处,敬请大神指正,不胜感激! 打开计算机,选择工具栏中的 映射网络驱动器,依据下图中的操作进行映射网络驱动器 ...

  5. emmc boot1 boot2 partition

    使用mfg tool烧写android5.1的镜像之后,再使用旧版的mfg tool烧写linux或者android镜像,都不能正常启动,而且运行的uboot还是android5.1版本的uboot. ...

  6. iOS：消除项目中警告

    引言: 在iOS开发过程中, 我们可能会碰到一些系统方法弃用, weak.循环引用.不能执行之类的警告. 有代码洁癖的孩子们很想消除他们, 今天就让我们来一次Fuck 警告!! 首先学会基本的语句: ...

  7. OpenJDK和JDK区别（转）

    使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的openjdk,那么到底什么是openjdk,它与sun jdk有什么关系和区别呢? 历史上的 ...

  8. 如何在SQLServer中处理每天四亿三千万记录

    首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. ...

  9. 初涉MySQL

    本文要点: MySQL基础 安装MySQL 配置MySQL 使用MYSQL 一.MySQL基础 MySQL 由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一个开源的关系型数据 ...

  10. 学习JAVA 安装

    下载 JDK      Tomcat9     Apache     mod_jk 1.安装JDK 这里就说配置环境变量 添加环境变量 JAVA_HOME(就是jdk的安装路径) CLASSPATH( ...