Ajax无刷新显示
前台页面
<%@ 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无刷新显示的更多相关文章
- Ajax.BeginForm()实现ajax无刷新提交
1. 同时安装 Microsoft jQuery Unobtrusive ajax 和 jQuery Unobtrusive Ajax,如下图 安装完成之后多了如下的js库 2. 引用该js库 lay ...
- 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...
- Ajax无刷新提交
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ajax 无刷新分页
//ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
- DWZ框架Ajax无刷新表单提交处理流程
DWZ框架Ajax无刷新表单提交处理流程是: 1. ajax表单提交给服务器 2. 服务器返回一个固定格式json结构 3. js会调函数根据这个json数据做相应 ...
- Thinkphp框架 -- ajax无刷新上传图片
用Thinkphp框架做无刷新上传图片 视图层 View <!doctype html> <html lang="en"> <head> < ...
- Ajax无刷新提交表单和显示
ajax无刷新表单提交: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- ajax无刷新方式收集表单并提交表单
ajax无刷新方式收集表单有两种方式, 一个是使用html5的FormData.一个是传统的方式. 一,FormData,在主流的浏览器中可以用,IE不好用啊. 另外,FormData使用有两个条件, ...
随机推荐
- 在Electron中通过ffi模块实现JavaScript调用C++动态库
目前在网上能搜到的JS调C++动态库的实现有两种,一种是通过开发Node.js addon模块的方式实现调用,这种对于我们已有的代码实现比较复杂,需要大量的开发,因此不适用:另一种是通过FFI模块,F ...
- php apc缓存以及与redis的对比
apc缓存用户数据这个会用, apc_store() 和apc_fetch()函数. 那apc 缓存php 代码,这个怎么用呢? 原文: http://blog.csdn.net/w187046226 ...
- [Vue] Setup custom keyCode
Vue provide some shortcut methods: @mousemove.stop is comparable to e.stopPropogation() @mousemove.p ...
- ubuntu下安装jre
jre下载地址:http://www.java.com/en/download/manual.jsp 1.将下载好的jre-7u55-linux-x64.tar.gz文件解压缩,得到jre1.7.0_ ...
- vmware 10虚拟机安装ubuntu server 14.04
-開始安装ubuntu server- 1.首先是安装系统时的语言,推荐选择English 然后安装系统 这里选择语言非常重要,我開始选择了中文,安装完毕后会乱码,所以推荐选择英文 由于在中国.所以选 ...
- LeetCode 7. Reverse Integer (倒转数字)
Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Output: 321 Examp ...
- 我所未知的 typeof 现象
一.一些基本使用测试 从上述可以看出: 1.判断一个 变量 是不是对象类型,不能只用 typeof 运算符: 2.它的返回值一直是一个字符串: 3.尽管 typeof null === 'object ...
- 第一章 Java Collections Framework总览
1.Java容器 Java容器中只能存放对象,对于基本数据类型(byte,short,char,int,long,float,double,boolean),需要包装成对象类型(Byte,Short, ...
- LNMP环境搭建——PHP篇
一.源代码安装 1.编译安装 ./configure --prefix=/usr/local/php\ --with-config-file-path=/usr/local/php/etc --wit ...
- 浅析Java开发模式—Model1、Model2和三层
"解耦"的思想一直是我们倡导的,但在实际项目中怎样去做?这是需要我们去好好思考的.下面以Model1.Model2.三层为切入点,对比下去了解解耦的思想. Model1 使用JSP ...