前台页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="QianBao.Dictionary.WebForm1" %>

<!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 id="Head1" runat="server">

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

    <title>Ajax实例1</title>

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

    <script type="text/javascript">

        $(function () {

            $("#btn1").click(function () {

                var txtparam1 = $("#txtParam1").val();

                var txtparam2 = $("#txtParam2").val();

                $.ajax({

                    url: "WebForm1.aspx/AjaxMethod", //发送到本页面后台AjaxMethod方法

                    type: "POST",

                    dataType: "json",

                    async: true, //async翻译为异步的，false表示同步，会等待执行完成，true为异步

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

                    data: "{param1:'" + txtparam1 + "',param2:'" + txtparam2 + "'}",

                    success: function (data) {

                        $("#result").html(data.d);

                    },

                    error: function () {

                        alert("请求出错处理");

                    }

                });

            });

        });

    </script>

</head>

<body>

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

    参数1：<input type="text" id="txtParam1" value="" /><br />

    参数2：<input type="text" id="txtParam2" value="" /><br />

    <input type="button" id="btn1" value="提交" /><br />

    <div id="result">

    </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;

using System.Web.Services;

namespace QianBao.Dictionary

{

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

    {

        protected void Page_Load(object sender, EventArgs e)

        {

        }

        //type方式必须是post，方法必须是静态的，方法声明要加上特性[System.Web.Services.WebMethod()]，

        //传递的参数个数也应该和方法的参数相同。

        [System.Web.Services.WebMethod()]

        public static string AjaxMethod(string param1, string param2)

        {

            return "参数1为：" + param1 + "，参数2为：" + param2;

        }

    }

}

Ajax无刷新显示的更多相关文章

  1. Ajax.BeginForm()实现ajax无刷新提交

    1. 同时安装 Microsoft jQuery Unobtrusive ajax 和 jQuery Unobtrusive Ajax,如下图 安装完成之后多了如下的js库 2. 引用该js库 lay ...

  2. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

  3. Ajax无刷新提交

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

  4. ajax 无刷新分页

    //ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...

  5. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  6. DWZ框架Ajax无刷新表单提交处理流程

    DWZ框架Ajax无刷新表单提交处理流程是: 1.       ajax表单提交给服务器 2.       服务器返回一个固定格式json结构 3.       js会调函数根据这个json数据做相应 ...

  7. Thinkphp框架 -- ajax无刷新上传图片

    用Thinkphp框架做无刷新上传图片 视图层 View <!doctype html> <html lang="en"> <head> < ...

  8. Ajax无刷新提交表单和显示

    ajax无刷新表单提交:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. ajax无刷新方式收集表单并提交表单

    ajax无刷新方式收集表单有两种方式, 一个是使用html5的FormData.一个是传统的方式. 一,FormData,在主流的浏览器中可以用,IE不好用啊. 另外,FormData使用有两个条件, ...

随机推荐

  1. 源码分析-react3-创建dom

    React.createElement class Welcome extends React.Component { constructor(){ super() this.state={ test ...

  2. 【CV论文阅读】Going deeper with convolutions(GoogLeNet)

    目的: 提升深度神经网络的性能. 一般方法带来的问题: 增加网络的深度与宽度. 带来两个问题: (1)参数增加,数据不足的情况容易导致过拟合 (2)计算资源要求高,而且在训练过程中会使得很多参数趋向于 ...

  3. ssh连接断开后 shell进程退出

    问题描述:当SSH远程连接到服务器上,然后运行一个服务 ./catalina.sh start,然后把终端开闭(切断SSH连接)之后,发现该服务中断,导致网页无法访问.   解决方法:使用nohup命 ...

  4. Server Tomcat v8.0 Server at localhost failed to start.

    怎么办? 查资料的话别人会告诉你须要删除一个东西.这是一种方法.可是你的错误并不是通过这种方法能够解决. 比方像我 <url-pattern>login</url-pattern&g ...

  5. jQuery--编辑表格

    表格操作是我们常常遇到的,还记得刚開始学习牛腩新闻公布系统时.跟着视频进行表格的一些基本操作.而对它的原理与概念全然不懂,不过跟着老师的操作而进行操作. 通过这次学习,对表格的操作有了进一步的了解与掌 ...

  6. git 命令 —— checkout

    git checkout 会重写工作区.check in 常常表示酒店入住,则 check out 就表示结账(检查)离开. 1. 基本用法 Git学习笔记04–git checkout git ch ...

  7. Vue.prototype的用法

    基础事例: 在vue项目main.js文件中: Vue.prototype.$appName = 'My App' 这样你可以通过在原型上定义它们使其在每个 Vue 的实例中可用. new Vue({ ...

  8. Gym - 102059D 2018-2019 XIX Open Cup, Grand Prix of Korea D. Dumae 贪心+堆

    题面 题意:有3e5个人排成一列,然后Li,Ri表示每个人可以站在[Li,Ri]中的一个,然后M(1e6)个限制条件,某个人一定要在某个人前面,求一种合法方案,无解输出-1 题解:首先可以想到对于限制 ...

  9. knockjs

    用VS2012建立Web站点有个新惊喜,默认加了KnockoutJS这个Javascript的MVVM模式的实现库,方便Web前端的开发 官方站点 √主页:  http://www.knockoutj ...

  10. HDU 3785 找寻大富翁

    2019-06-06 08:30:03 坚持!!! 做这些水题,都觉得心累,特别是HDU的题,我PE了3发