浅尝JQ AJAX

　　因为之前写AJAX都是用js,于是今天就试下用JQ写AJAX,感觉很爽,代码也写得少,也习惯了一点括号的写法,因为之前一直都没多少去写括号。

关于JQ AJAX，JQ的理念是write less do more，今天写的就深有体会，不但不需要开发者去关心浏览器的兼容性问题，而且JQ的选择器也非常强大，例如：

这里我给两个textbox增加一个class为text的东西，那么我在代码中清空这些textbox只需要这一句的代码 $(".text").attr("value","");就可以吧所有含有class为text的value清空。

在dom加载完毕之后，就为按钮增加click的事件，增加一个AJAX的函数代码如下：

 1 $(function () {
 2
 3             $("#bt").click(function () {
 4
 5                 $.ajax({
 6
 7                     type: "Post",
 8
 9                     url: "ajax.ashx",
10
11                     data: "name="+$("#name").val()+"&sex=man",
12
13                     dataType: "text",
14
15                     success: function (data) {
16
17                         $("#ajax").attr("Value", data);
18
19                         $("p").html(data);
20
21                     },
22
23                     error: function () {
24
25                         $("#ajax").html("请求失败!");
26
27                     }
28
29                 });
30
31             });
32
33             $("#bt_clear").click(function () {
34
35                 $("#ajax").attr("Value", "");
36
37                 $("p").html("");
38
39             });
40
41         });

这段代码的意思就是点击按钮，就把id为name的textbox里面的值发送回后台，然后后台获取值之后再把那个值给输出到前端的textbox以及p标签，为id为bt_clear的按钮增加清空的功能。如果想偷懒，那么就用下面的一段代码：

 1 $(function () {
 2
 3             $("#bt").click(function () {
 4
 5                 $.post("ajax.ashx",
 6
 7                   { name: $("#name").val(), sex: "man" },
 8
 9                    function (data) {
10
11                        $("#ajax").attr("Value", data);
12
13                        $("p").html(data);
14
15                    }
16
17                 );
18
19                });
20
21                $("#bt_clear").click(function () {
22
23                    //                   $(".text").attr("value","");
24
25                    $("#ajax").attr("Value", "");
26
27                    $("p").html("");
28
29                    $("#name").attr("value", "")
30
31                });
32
33            });

这段代码达到的效果是一样的，但是我个人觉得一般比较推荐第一种，因为我们可以操控的东西可以更加多，也意味着可以更加灵活。

下面是后台代码，比较简单：

<%@ WebHandler Language="C#" class="ajax" %>using System;using System.Web;public class ajax : IHttpHandler {public void ProcessRequest (HttpContext context) {context.Response.ContentType = "text/plain";context.Response.Write(context.Request["name"]);}public bool IsReusable {get {return false;}}}

主要是可以让自己知道究竟有没有获取了数据，以及将数据输出是否正确。

转载于:https://www.cnblogs.com/jeanlyn/archive/2012/05/30/2527122.html

浅尝JQ AJAX相关推荐

浅尝key-value数据库（三）——MongoDB的分布式
浅尝key-value数据库(三)--MongoDB的分布式测试了单机MongoDB的随机读和写入性能,这一节来讲一讲MongoDB的分布式. MongoDB的分布式分成两种,一种是Replicat ...
JQ ajax解决跨域
JQ ajax请求失败 "No Transport",浏览器跨域的意思. jQuery.support.cors = true:请求前添加这行代码,解决跨域问题
论文浅尝 | 利用多语言 wordnet 上随机游走实现双语 embeddings
论文笔记整理:谭亦鸣,东南大学博士生,研究方向为知识图谱问答. 来源:Knowledge Based System 链接:https://www.sciencedirect.com/science/a ...
论文浅尝 | 图神经网络综述：方法及应用
论文链接:https://arxiv.org/pdf/1812.08434.pdf GNN相关论文列表链接:https://github.com/thunlp/GNNPapers 近日,清华刘知远老师 ...
论文浅尝 | 当知识图谱遇上零样本学习——零样本学习综述
随着监督学习在机器学习领域取得的巨大发展,如何减少人工在样本方面的处理工作,以及如何使模型快速适应层出不穷的新样本,成为亟待解决的问题.零样本学习(Zero-Shot Learning, ZSL)的提 ...
论文浅尝 | 近期论文精选
本文转载自公众号 PaperWeekly, 对我们近期的论文浅尝进行了精选整理并附上了相应的源码链接,感谢 PaperWeekly! TheWebConf 2018 ■ 链接 | https://ww ...
论文浅尝 | 从 6 篇顶会论文看「知识图谱」领域最新研究进展 | 解读代码
本文内容源自往期「论文浅尝」,由 PaperWeekly 精选并重新排版整理,感谢 PaperWeekly. ISWC 2018 ■ 链接 | http://www.paperweekly.site/ ...
java如何写ajax,java,jq,ajax写分页
1.先写好html基础样式我懒得去写css样式233,能看就行 #page { width: 20px; } id name pwd age 上一页下一页 2.编写servlet 2.1 先写查询 ...
通过集成腾讯 IM 来浅尝一下.net 6 的 MINI API
背景下一篇在继续 Go 的学习笔记,因为这阵子一直有项目压着,确实没有精力去总结学习成果.所以这篇就先换换口味,切回老本行,分享一下.net 6 的一个小知识. 前些天,我们对外提供的一些管理系统, ...

浅尝JQ AJAX

浅尝JQ AJAX相关推荐

最新文章

热门文章