通过 ajax() 与 一般处理程序,请求数据库数据,实现界面无刷新。

Jquery ajax 请求参数详细说明 http://www.w3school.com.cn/jquery/ajax_ajax.asp

代码:

 <!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="jquery-1.3.2-vsdoc2.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div style="margin: 50px;">
<input value="点击" type="button" id="btn"/>
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
$.ajax({
url: 'ashx/Handler1.ashx',//string类型的参数,发送请求的地址
type: 'POST',//请求方式(post or get)默认为get
contenType: "application/json;charset-utf-8",//发送信息至服务器时内容编码类型
dataType: 'text',//预期服务器返回的数据类型
data: {},//发送的请求数据
success: function (data) {
alert(data);
}
});
});
})
</script>
</body>
</html>
 using System.Web;

 namespace DemoAjxa.ashx
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain"; context.Response.Write("Hello World");
} public bool IsReusable
{
get
{
return false;
}
}
}
}

效果:

上面是post请求,获得纯文本字符串,如果是要获得json 数据的话

则需要将ajax 的参数dataType设为 josn,一般处理程序 context.Response.Write();返回的数据类型也必须是json 格式哦

然后将获得的json 数据解析并绑定到界面上

列: dataType: 'json',//预期服务器返回的数据类型


data{name:'huangenai'}如果data带参数,
在一般处理程序这样可以获得传过来的参数
string name=context.Request["name"].ToString(); 关于请求返回为error
1.查看 url 请求地址是否正确 火狐浏览器,安装插件 Firebug,F12可以看到报错了 显示请求地址NotFound

2.data{} 即时不传参数也要这样写上哦,不然会报错的

3.返回的数据类型是否与 dataType 一致

如果不一致则会报错

4.检查时否发生了跨域的请求

5.编码格式是否正确

当然也可以在代码中这样写,将错误输出查看到底是什么错误

 <script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
$.ajax({
url: 'ashx/Handler1.ashx',//string类型的参数,发送请求的地址
type: 'POST',//请求方式(post or get)默认为get
contenType: "application/json;charset-utf-8",//发送信息至服务器时内容编码类型
dataType: 'text',//预期服务器返回的数据类型
data: {name:'huangenai'},//发送的请求数据
success: function (data) {
alert(data);
}, error: function (XMLHttpRequest) {
alert("Ajax请求失败,错误状态为:"+XMLHttpRequest.status);
}
});
});
})
</script>

效果:

XMLHttpRequest 对象

属性

readyState:请求状态,开始请求时值为0直到请求完成这个值增长到4(readyState共有5中状态,0未初始化,1已初始化,2发送请求,3开始接收结果,4接收结果完毕。

responseText:目前为止接收到的响应体,readyState<3此属性为空字符串,=3为当前响应体,=4则为完整响应体

responseXML:服务器端相应,解析为xml并作为Document对象返回

status:服务器端返回的状态码,=200成功,=404表示“Not Found”

statusText:用名称表示的服务器端返回状态,对于“OK”为200,“Not Found”为400

用JQuery Ajax 与一般处理程序 请求数据无刷新,以及如何调试错误的更多相关文章

  1. jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

    jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...

  2. Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面

    一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...

  3. 2016 系统设计第一期 (档案一)jQuery ajax serialize()方法form提交数据

    jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(fun ...

  4. Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目

    经过上一篇博客,本节主要是来看实现的功能是后台的数据通过json数据传过来,前台修改的数据再传回数据库之后页面再次更新table中的数据: 图示: 实例:前台的代码 <%--表格显示区--%&g ...

  5. jQuery基础(Ajax,load(),getJSON(),getScript(),post(),ajax(),同步/异步请求数据)

    1.使用load()方法异步请求数据   使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:   load(url,[data],[callba ...

  6. 当jquery ajax遇上401请求

    jquery ajax是个很常用接口,而在请求时候,可能存在响应401的情况(身份认证过期或未登录),比较容易出现在混合应用上,如何进行身份认证,重发失败请求,还是值得注意的. ajax请求有两种方式 ...

  7. Jquery+Ajax实现Select动态添加数据

    https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...

  8. SharePoint 2010 以Jquery Ajax方式更新SharePoint列表数据!

    之前本人的博客介绍了<sharepoint 2010自定义访问日志列表设置移动终端否和客户端访问系统等计算列的公式>,那如何通过Jquery提交访问日志到自定义的SharePoint的访问 ...

  9. ajax 删除数据无刷新

    //html页面 <!doctype html><head> <title></title> <meta http-equiv="Con ...

随机推荐

  1. toroiseSVN 无法连接服务器,提示unable connect to ……url 参数错误

    之前使用的好好的,有天突然提示无法连接repository url,能ping通服务器,就是一直报错,找了很多方法,如: 1.删除缓存及缓存文件 2.删除软件并重新安装 3.关闭windows防火墙 ...

  2. dos清除缓存

    ipconfig /flushdns ,DNS缓存就被清除了. ipconfig /displaydns查看DNS缓存

  3. 利用@media screen实现网页布局的自适应

    利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...

  4. snmp学习笔记

    snmp5.5 client 包含头文件 #include <net-snmp/net-snmp-config.h> #include <net-snmp/net-snmp-incl ...

  5. poj3187-Backward Digit Sums(枚举全排列)

    一,题意: 输入n,sum,求1~n的数,如何排列之后,相邻两列相加,直到得出最后的结果等于sum,输出1~n的排列(杨辉三角)  3 1 2 4 //1~n 全排列中的一个排列  4 3 6  7 ...

  6. For循环打印正三角,倒三角,菱形

    A:正三角形: 内循环的判断条件:y<=x for(int x=0; x<5; x++) { for(int y=0; y<=x; y++) { System.out.print(& ...

  7. 在一个SQL Server表中的多个列找出最大值

    在一个SQL Server表中一行的多个列找出最大值 有时候我们需要从多个相同的列里(这些列的数据类型相同)找出最大的那个值,并显示 这里给出一个例子 IF (OBJECT_ID('tempdb..# ...

  8. .NET Fringe 定义未来

    在dotnetconf 2015会宣布了4.12-14 在波特兰召开 .NET Fringe http://dotnetfringe.org/ ,中文社区很少有相关的介绍,本文向大家介绍下这个.NET ...

  9. ABP理论学习之OWIN集成

    返回总目录 如果你的应用中使用了OWIN,那么需要在主项目(一般来说是指Web项目)中添加Abp.Owin的nuget包,然后像下面那样在OWIN的 Startup文件中调用 UseAbp()扩展方法 ...

  10. ABP理论学习之MVC控制器(新增)

    返回总目录 本篇目录 介绍 AbpController基类 本地化 异常处理 响应结果的包装 审计日志 授权 工作单元 其他 介绍 ABP通过Abp.Web.Mvc nuget包集成了ASP.NET ...