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



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页面无刷新请求实现,布布扣,bubuko.com

时间: 2024-12-26 16:07:19

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

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

AJAX的原理是什么? 实际上就是发起HTTP请求,既然就是发起HTTP请求,那只要我们能够实现发起HTTP请求就可以在不使用AJAX的情况下实现相同的效果. 在前端有好多方式可以发起HTTP请求,比如script标签的src以及图片的src,css背景图片,等等. 案例1:通过HTTP状态码204实现页面无刷新 下面来一个小案例,实现一个页面无刷新的投票功能. html: <div id="box"> <h1>周杰伦</h1> <p>0

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

接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口.关于FormData,大家可以看MDN文档. 1,先看效果图 期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击"ajax提交",将文件上传至服务器,上传成功后,页面给出一个简单的提示. 2,前端的代

学习aiax(javascript)--页面无刷新用ajax检查用户名是否已注册(POST方式)

1.jsp代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

学习aiax(javascript)--页面无刷新更新ajax更新时间

1.JSP代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

JQuery 实现页面无刷新

对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作.(http://itred.cnblogs.com    itRed: [email protected]) 在用JQuery实现页面无刷新的效果之前,我们需要掌握和了解一些基础知识,以方便我们在进行代码编写时更加的得心应手. 一.异步技术 浏览器预设是使用同步的方式发出请求并等待回应,为了处理浏

文件上传的动作不能太俗,必须页面无刷新上传

人生永远没有太晚的开始 好久没有更新博客了,说实话,每天抽空打开博客园总感觉心里很空虚,不是没有在修行,而是因为最近在跟着博老前辈完成一项很重要的使命——打造属于我们自己的奇遇帝国,好了废话不多说,首先我在北京向各位带好,希望各位能在2018年达到自己预设的人生高度. 常规操作上传文件 1 <form action="xxx.action" method="post" enctype="multipart/form-data"> 2

Django使用Ajax实现页面无刷新评论回复功能

虽然Django本身自带Form可以提交表单,但在Django中结合Jquery使用Ajax,可以让Django开发的应用发挥更好的用户体验,同时可以降低服务器的负担.普通提交表单方式需要刷新整个页面才可以将评论显示出来,而使用Ajax提交评论之后,可以在页面无刷新的情况下显示出来. 首先是model: class Replay(models.Model): content = models.TextField() post = models.ForeignKey(Post) replay_ti

js界面刷新&Django使用Ajax实现页面无刷新评论回复功能

Django使用Ajax实现页面无刷新评论回复功能 http://www.cnblogs.com/mfc-itblog/p/5188900.html js界面刷新 http://www.cnblogs.com/dingdingo/archive/2011/10/26/2225307.html js界面刷新&Django使用Ajax实现页面无刷新评论回复功能

ASP.NET—015:ASP.NET中无刷新页面实现

原文作者:杨友山 原文地址:http://blog.csdn.net/yysyangyangyangshan/article/details/39679823 前面也说过在asp.net中前后前交互的问题.使用了ajax.js的方法:$.post和$.ajax. http://blog.csdn.net/yysyangyangyangshan/article/details/22755007和http://blog.csdn.net/yysyangyangyangshan/article/det