Asp.net页面无刷新请求实现



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="omAjaxSubmit.aspx.cs" Inherits="OMDemo.demo.omAjaxSubmit" %>

<!DOCTYPE html>

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

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="../operamasks-ui/jquery-1.7.1.js"></script>

    <script src="../operamasks-ui/operamasks-ui.min.js"></script>

    <link href="../operamasks-ui/themes/apusic/operamasks-ui.css" rel="stylesheet" />

    <script>

        var btnclick;

        $(document).ready(function () {

            var type;

            btnclick = function btnclick(btn) {

                var txt = $(btn).val();

                type = txt;

            }

            $('#form1').bind('submit', function (e) {

                e.preventDefault(); //阻止form默认的提交行为

                var btn = $(e);

                $(this).omAjaxSubmit(//使用ajax提交

                    {

                        data: { type: type },

                        //target: "#output"

                        target: document.body

                    }

                );

            });

        });

    </script>

</head>

<body>

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

        <div>

            <input type="text" runat="server" name="name" id="name" value=" " />

            <input type="text" runat="server" name="age" value=" " id="age" />

            <asp:Button ID="Button1" runat="server" Text="add" OnClientClick="btnclick(this)" />

            <asp:Button ID="Button2" runat="server" Text="edit" OnClientClick="btnclick(this)" />

            <asp:Button ID="Button3" runat="server" Text="del" OnClientClick="btnclick(this)" />

            <div id="output"></div>

        </div>

    </form>

</body>

</html>




后台如下：




using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace OMDemo.demo

{

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

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            var type = Request["type"];

            if (type == "add")

            {

                var name = Request["name"];

                var age = Request["age"];

                Response.Write("添加：" + name + age);

                Response.End();

            }

            else if (type == "edit")

            {

                //Response.Write("修改：" + name.Value + age.Value);

                name.Value = "中国宋兴柱";

                //Response.End();

            }

            else if (type == "del")

            {

                Response.Write("删除：" + name.Value + age.Value);

                //Response.End();

            }

        }

    }

}


												


											
Asp.net页面无刷新请求实现的更多相关文章
	

    
								
  1. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)
		
    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...
    
		
    2. 
						
  2. HTTP与AJAX深入揭秘，不使用AJAX实现页面无刷新
		
    AJAX的原理是什么? 实际上就是发起HTTP请求,既然就是发起HTTP请求,那只要我们能够实现发起HTTP请求就可以在不使用AJAX的情况下实现相同的效果. 在前端有好多方式可以发起HTTP请求,比 ...
    
		
    3. 
						
  3. JQuery 实现页面无刷新
		
    对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...
    
		
    4. 
						
  4. 浅谈页面无刷新技术ajax
		
    现在一般网站都是用ajax来实现页面无刷新操作的. 什么是无刷新:ajax可以实现页面与后台的数据交互,用户完全感觉不出页面有任何的刷新,这就是AJAX的无刷新. ajax方法实现: 可以对ajax进 ...
    
		
    5. 
						
  5. Ajax下载文件(页面无刷新)
		
    说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果.实质上还是通过提交form表单来返回文件流的输出. 分步实现逻辑: ajax请求服务器,访问数据库,根据 ...
    
		
    6. 
						
  6. 基于jQuery的ajax系列之用FormData实现页面无刷新上传
		
    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...
    
		
    7. 
						
  7. 页面无刷新Upload File
		
    页面无刷新Upload File. 利用jquery.form.js的ajaxForm提交文件. 具体参考以下代码: 前台html <%@ Page Language="C#" ...
    
		
    8. 
						
  8. 纯js异步无刷新请求(只支持IE)
		
    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...
    
		
    9. 
						
  9. 纯js异步无刷新请求(只支持IE)【原】
		
    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. android任意view爆炸效果--第三方开源--ExplosionField
			
    犹如天女散花一样,爆炸散列,比较有趣.Android ExplosionField在github上的项目主页是:https://github.com/tyrantgit/ExplosionField  ...
    
			
    2. 
						
  2. 查看SDCard是否被挂载
			
    获取Environment.getExternalStorageState(),然后得到的字符串进行查看 //android.os.Environment.MEDIA_MOUNTED="mo ...
    
			
    3. 
						
  3. 对java面试文章的技术漫谈的C#技术理解
			
    .NET人技术太菜的话,要好好学习啊,所以看到Java届的面试对话文章,不经意想用C#的知识想做一些回应(其实也没有什么了不起的). 楼下知识文章扩展一览,外加自己接触到的扩展.水太深! static ...
    
			
    4. 
						
  4. Node.js中的模块化
			
    每天一篇文章来记录记录自己的成长吧.大二,该静心了.加油~ 好了,废话不多说,今天说说nodejs中的模块化.(注:此文为自己对书nodejs实战的总结) nodejs一个重要的特性就是模块化,模块就 ...
    
			
    5. 
						
  5. Redis 四：存储类型之有序集合
			
    有序集合似乎更大的操作是由于加了一个叫做“分子”的东西 事实上就好像普通的数据,只是为这个数据加了一个纯数字的标识, 通过操作这些标识来得到我们想要的数据! 分子可以是整形,也可以是双精度浮点型: = ...
    
			
    6. 
						
  6. 九度oj 1184 二叉树遍历
			
    原题链接:http://ac.jobdu.com/problem.php?pid=1184 简单的二叉树重建,遍历. 如下: #include<cstdio> #include<cs ...
    
			
    7. 
						
  7. Word2013死机的问题
			
    Word2013用公式编辑器经常死机,网上介绍方法.试试看https://zhidao.baidu.com/question/937023473910649252.html1.启动word2013 2 ...
    
			
    8. 
						
  8. 主要从架构上来做优化，负载均衡、CDN、静态化、数据库的水平切割和纵向切割、读写分离、分布式缓存着手
			
    语言知识一种工具,甚至技术本身也只是一种工具,本身并不值钱,关键在于用于何种行业,产生了什么价值. 但从语言来看,我个人更喜欢php,然后是C#,然后是java从框架而言,先是java,然后C#,再次 ...
    
			
    9. 
						
  9. R语言 如何为图片添加文字说明（转载）
			
    转载:(中文翻译者)[http://blog.csdn.net/chen790646223/article/details/49766659] (原文链接)[http://datascienceplu ...
    
			
    10. 
						
  10. Teamwork——Week 4 Daily Scrum Meeting#1 2013.10.23
			
    一.会议议题 1)根据确立的项目题目,进一步明确PM,DEV,TEST的工作. 2)确定团队分工和预估项目时间. 3)完成项目架构NABC模型. 4)确定第一轮开发团队分工 二.会议时间 2013年1 ...
    
			
    11.