1.  
  1.  

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

  1.  
  2. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="omAjaxSubmit.aspx.cs" Inherits="OMDemo.demo.omAjaxSubmit" %>
  3.  
  4. <!DOCTYPE html>
  5.  
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7. <head runat="server">
  8.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9.     <title></title>
  10.     <script src="../operamasks-ui/jquery-1.7.1.js"></script>
  11.     <script src="../operamasks-ui/operamasks-ui.min.js"></script>
  12.     <link href="../operamasks-ui/themes/apusic/operamasks-ui.css" rel="stylesheet" />
  13.     <script>
  14.         var btnclick;
  15.         $(document).ready(function () {
  16.             var type;
  17.  
  18.             btnclick = function btnclick(btn) {
  19.                 var txt = $(btn).val();
  20.                 type = txt;
  21.             }
  22.             $('#form1').bind('submit', function (e) {
  23.                 e.preventDefault(); //阻止form默认的提交行为
  24.                 var btn = $(e);
  25.                 $(this).omAjaxSubmit(//使用ajax提交
  26.                     {
  27.                         data: { type: type },
  28.                         //target: "#output"
  29.                         target: document.body
  30.                     }
  31.                 );
  32.             });
  33.         });
  34.     </script>
  35. </head>
  36. <body>
  37.     <form id="form1" runat="server">
  38.         <div>
  39.             <input type="text" runat="server" name="name" id="name" value=" " />
  40.             <input type="text" runat="server" name="age" value=" " id="age" />
  41.             <asp:Button ID="Button1" runat="server" Text="add" OnClientClick="btnclick(this)" />
  42.             <asp:Button ID="Button2" runat="server" Text="edit" OnClientClick="btnclick(this)" />
  43.             <asp:Button ID="Button3" runat="server" Text="del" OnClientClick="btnclick(this)" />
  44.             <div id="output"></div>
  45.         </div>
  46.     </form>
  47. </body>
  48. </html>

后台如下：

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7.  
  8. namespace OMDemo.demo
  9. {
  10.     public partial class omAjaxSubmit : System.Web.UI.Page
  11.     {
  12.         protected void Page_Load(object sender, EventArgs e)
  13.         {
  14.             var type = Request["type"];
  15.             if (type == "add")
  16.             {
  17.                 var name = Request["name"];
  18.                 var age = Request["age"];
  19.                 Response.Write("添加：" + name + age);
  20.                 Response.End();
  21.             }
  22.             else if (type == "edit")
  23.             {
  24.                 //Response.Write("修改：" + name.Value + age.Value);
  25.                 name.Value = "中国宋兴柱";
  26.                 //Response.End();
  27.             }
  28.             else if (type == "del")
  29.             {
  30.                 Response.Write("删除：" + name.Value + age.Value);
  31.                 //Response.End();
  32.             }
  33.  
  34.         }
  35.  
  36.     }
  37. }

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

  1. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  2. HTTP与AJAX深入揭秘，不使用AJAX实现页面无刷新

    AJAX的原理是什么? 实际上就是发起HTTP请求,既然就是发起HTTP请求,那只要我们能够实现发起HTTP请求就可以在不使用AJAX的情况下实现相同的效果. 在前端有好多方式可以发起HTTP请求,比 ...

  3. JQuery 实现页面无刷新

    对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...

  4. 浅谈页面无刷新技术ajax

    现在一般网站都是用ajax来实现页面无刷新操作的. 什么是无刷新:ajax可以实现页面与后台的数据交互,用户完全感觉不出页面有任何的刷新,这就是AJAX的无刷新. ajax方法实现: 可以对ajax进 ...

  5. Ajax下载文件(页面无刷新)

    说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果.实质上还是通过提交form表单来返回文件流的输出. 分步实现逻辑: ajax请求服务器,访问数据库,根据 ...

  6. 基于jQuery的ajax系列之用FormData实现页面无刷新上传

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

  7. 页面无刷新Upload File

    页面无刷新Upload File. 利用jquery.form.js的ajaxForm提交文件. 具体参考以下代码: 前台html <%@ Page Language="C#" ...

  8. 纯js异步无刷新请求(只支持IE)

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

  9. 纯js异步无刷新请求(只支持IE)【原】

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

随机推荐

  1. WebForm与MVC混用

    步骤一:添加引用 -> 程序集 -> 扩展 -> System.Web.Mvc ; System.Web.Razor; System.Web.WebPages; System.Web ...

  2. ORACLE DG之参数详解

    1.DB_NAME 数据库名字,需要保持同一个Data Guard中所有数据库DB_NAME相同. 主库和备库相同 DB_NAME='chicago' DB_NAME='chicago' 2.DB_U ...

  3. Pure扩展站--个人博客

    作为自己css的练习站:http://1111.oyostar.com/.更新自己扩展pure写的css,外加一些jquery的插件.感谢朋友的空间和子域名!

  4. jquery.validate新的写法(jquery.validate1.13.js)

    <script src="../js/jquery.js"></script> <script src="../js/jquery.vali ...

  5. pure css做的pc登陆界面

    源码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  6. Ruby使用gets的错误：gets得到的有'\n'，需要使用chomp去掉

    gets方法得到的字符串包含一个“\n”回车符,所以我们需要继续使用chomp方法把"\n"回车符去掉

  7. 详谈 oracle 索引 （笔记）

    1.oracle索引空值问题 当在有空值得列上建立单列索引时,如果搜索条件为 is null 在解释计划中可以看到,对于此列oracle并没有使用索引查询: 但是当建立的是多列索引是,就会按照索引来进 ...

  8. 如何实现GridView的选中，编辑，取消，删除功能

    protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e) { string sqlstr = &qu ...

  9. 使用IC框架开发跨平台App的备忘录123

    1,关于图标与启动屏幕 icon.png 192x192splash.png 2208x2208 将这两个图片放在resources目录下,在终端执行:ionic resources --iocn - ...

  10. Labview实现单边带信号调制（SSB）[移相法]

    Labview实现单边带信号调制(SSB)[移相法] 时域上的表达式为 调制器模型为 这个实验中需要相位偏移比较多,因为一共用了四个信号仿真器,一个是无偏移的调制信号,一个是偏移的调制信号,一个是无偏 ...