通过 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. angluar去掉url中#

    众所周知,angular项目中路由机制会在地址栏加一个#来实现各个页面的切换,虽然url中有个#号也无伤大雅,但每次看到多一个这个东西总是不舒服(我不是强迫证啊),趁着项目间隙还是决定把它去掉. 去谷 ...

  2. host Object和native Object的区别

    Native Object: JavaScript语言提供的不依赖于执行宿主的对象,其中一些是内建对象,如:Global.Math:一些是在脚本运行环境中创建来使用的,如:Array.Boolean. ...

  3. 《社交网络》里的评分公式——ELO排名系统

    <社交网络>里的Mark Zackburg被女朋友甩后,在舍友的启发下,充分发挥了技术宅男自娱自乐的恶搞天分,做出了Facemash网站,对学校女生的相貌进行排名打分,结果网站访问流量过大 ...

  4. 【Beta】Daily Scrum Meeting第五次

    1.任务进度 学号 已完成 接下去要做 502 登陆时将返回的个人信息更新到本地数据库 发布任务到服务器 509 给所有api添加注释 添加及修改职工信息并同步到服务器 517 将提交报课移到报课表界 ...

  5. [IOS] 'Double' is not convertible to 'CGFloat'

    在做一个对象旋转的时候,要求转动的弧度角, 这个地方报错,如题的错误,其实是类型转换的问题,swift不能静静的做类型转换,一定要显式的转换 typeTableView?.transform=CGAf ...

  6. android之Handler机制

    简单例子开头: 网络http请求网站源码数据并显示 注意点:访问网络需要加Internet权限: android.permission.INTERNET 简单的步骤: 使用UrlConnection请 ...

  7. nginx 软连接

    ln -s 目标地址 源地址 ln -s ../../../web-admin/etc/nginx-location.conf web-admin.conf

  8. c# 元组Tuple

    Tuple类型像一个口袋,在出门前可以把所需的任何东西一股脑地放在里面.您可以将钥匙.驾驶证.便笺簿和钢笔放在口袋里,您的口袋是存放各种东西的收集箱.C# 4.0引入的一个新特性 Tuple类型与口袋 ...

  9. Javascript设置对象属性为"只读"

    有时为了保护某些属性,让其无法被更改,我们会把他们设置为常量. 在某些语言里面,也许会用const来实现这样的功能.本文讲述如何在Javascript中实现这样的功能. 方法一: var myObje ...

  10. 用chrome来映射查找样式对应的sass

    较新版本的sass(3.3+)支持source-map功能,可以配合谷歌浏览器或者livestyle来映射查找对应的样式. 要生成source-map可以在grunt中使用 grunt-contrib ...