目标：在aspx页面输入两参数，传到后台.cs代码，在无刷新显示到前台

下面是我的Ajax异步传值的第一个实例

1.前台html代码：

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

<head runat="server">

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

    <title>Ajax实例1</title>

    <script src="Scripts/jquery-1.7.1.min.js"></script>

    <script type="text/javascript">

        $(function () {

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

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

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

                $.ajax({

                    url: "demo1.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>

2.后台代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace AjaxDemo

{

    public partial class demo1 : 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;

        }

    }

}

3.运行效果：

4.输入数据，点击提交后：

 5.注意：

第1步中contentType: "application/json; charset=utf-8"这句不可少！不设置这个，json也是返不回来的

当然，你也可以如下这种Post传值格式写：

var data={"name":"Tom","age":""};

var url="XXX.ashx"

$.post(url,data,function (){alert("ok!")});

C#中jQuery Ajax实例（一）的更多相关文章

  1. C#中jQuery Ajax实例（二）

    上一篇写了一个简单的Ajax异步程序,这一次同样是简单的程序,只不过这次先把参数传到一般处理程序(后缀为ashx)中,再把结果传回到页面. 1.html代码: <html xmlns=" ...

  2. JavaScript强化教程——jQuery AJAX 实例

    什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...

  3. jquery ajax实例教程和一些高级用法

    jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个ajax请求都会用到这几个参数,本文将介绍更多jquery ...

  4. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  5. jQuery AJAX实例

    <html><head><title>jQuery Ajax 实例演示</title></head><script language= ...

  6. jQuery Ajax 实例 ($.ajax、$.post、$.get)【转载】

    本文转载自:http://jun1986.iteye.com/blog/1399242 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的 ...

  7. jQuery Ajax 实例 ($.ajax、$.post、$.get)转

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:ht ...

  8. 转：jQuery Ajax 实例 全解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...

  9. 【JavaScript】jQuery Ajax 实例 全解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...

随机推荐

  1. 添加 Windows 8.1 无虚拟机启动项 解决极品飞车的不支持虚拟机报错

    在Windows 8.1 64位环境下,安装完极品飞车17后,运行程序会出现错误对话框: Sorry, this application cannot run under a Virual Machi ...

  2. ASP.NET中Url重写后,打不开真正的Html页面

    不对IIS配置.html的映射,IIS站点目录下.html页面都能显示.当配置了.html的映射 IIS站点目录下真实存在的.html页面无法显示,错误信息:“页面无法显示”解决方法:1.首先照旧在网 ...

  3. Oracle用户信息查询

    1.查看所有用户: select * from dba_users;    select * from all_users;    select * from user_users; 2.查看用户或角 ...

  4. 基本Java数据类型

    一.整型:java中的基本数据类型byte,占用1个字节,8位   取值范围:0000 0000 ~ 1111 1111 (-128 ~ 127)   为什么不是:0000 0000 ~ 1111 1 ...

  5. Task Scheduler Error and Success Constants (Windows)

    If an error occurs, the Task Scheduler APIs can return one of the following error codes as an HRESUL ...

  6. RAID 容量计算器

    https://www.synology.com/zh-cn/support/RAID_calculator   磁盘阵列比较表   n/2 n/2 n n/2 安全性高 综合RAID 0/1优点,理 ...

  7. Cinder相关命令收集

    1. 重置状态 source admin-openrc.sh cinder reset-state 51108241-7ffe-44a8-acfa-4cddac8d4793

  8. 配置Log4j(很详细)

    Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...

  9. POJ 3628 Bookshelf 2（01背包）

    Bookshelf 2 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9488   Accepted: 4311 Descr ...

  10. OpenGL extension specification (from openGL.org)

    Shader read/write/atomic into UAV global memory (need manual sync) http://www.opengl.org/registry/sp ...