JQuery-让Ajax变的更简单
//加载并执行一个 JS 文件。 $(document).ready(function() {$("p").bind("click", function() {$.ajax({type: "GET",url: "test.js",dataType: "script"});}); }); //保存数据到服务器,在服务器进行处理。成功时显示信息。 $(document).ready(function() {$("p").bind("click", function() {$.ajax({type: "POST",url: "LeaveMsg.aspx",data: "title=Hello&Message=Brian",success: function(msg){alert( "Data Saved: " + msg );} });
$.ajax() 使Ajax 由复杂变简单。 (2)load(url,[data],[callback])>>载入远程 HTML 文件代码并插入至 DOM 中 Options: Ajax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此,只需简单地选择所需的元素,然后使用load()函数即可。 url (String) : 待装入 HTML 网页网址。 data (Map) : (可选) 发送至服务器的 key/value 数据。 callback (Callback) : (可选) 载入成功时回调函数。 Example:
//加载 DoubleColorTable.htm 文件内容$(document).ready(function() {$("p").load("DoubleColorTable.htm"); });
(3)jQuery.get(url,[data],[callback])>>通过远程 HTTP GET 请求载入信息 这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。 Options: url (String) : 待装入 HTML 网页网址。 data (Map) : (可选) 待发送 Key/value 参数。 callback (Function) : (可选) 载入成功时回调函数。 Example:
//显示 test.aspx返回值(HTML 或 XML,取决于返回值)。 $.get("test.aspx", function(data){alert("Data Loaded: " + data); });
(4)jQuery.post(url,[data],[callback])>>通过远程 HTTP POST 请求载入信息。 这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。 Options: url (String) : 发送请求地址。 data (Map) : (可选) 待发送 Key/value 参数。 callback (Function) : (可选) 发送成功时回调函数。 (5)Ajax事件 ajaxComplete(callback): AJAX 请求完成时执行函数。XMLHttpRequest 对象和设置作为参数传递给回调函数。 ajaxError(callback): AJAX 请求发生错误时执行函数。XMLHttpRequest 对象和设置作为参数传递给回调函数。捕捉到的错误可作为最后一个参数传递。 ajaxSend(callback) AJAX 请求发送前执行函数。XMLHttpRequest 对象和设置作为参数传递给回调函数。 ajaxStart(callback) AJAX 请求开始时执行函数。Ajax 事件。 ajaxStop(callback) AJAX 请求结束时执行函数。Ajax 事件。 ajaxSuccess(callback) AJAX 请求成功时执行函数。Ajax 事件。XMLHttpRequest 对象和设置作为参数传递给回调函数。 jQuery Ajax 实例体验 下面借助一个留言板实例来体验下jQuery中的Ajax使用。从而体验jQuery带给我们的方便。 先来看看原始Ajax的代码:
function $(e) {return document.getElementById(e);} function String.prototype.trim(){return this.replace(/(^s*)|(s*$)/g,"");}var xmlHttp; var xmlHttpGet function getXmlHttp()//创建XMLHttpRequest对象 {var xmlHttpNew = null;try{xmlHttpNew = new XMLHttpRequest();}catch (e){try{xmlHttpNew = new ActiveXObject("Msxml2.XMLHTTP");}catch (e){xmlHttpNew = new ActiveXObject("Microsoft.XMLHTTP");}}return xmlHttpNew; }function addMessage()//向数据库中添加数据 {xmlHttp = getXmlHttp();if (xmlHttp == null){alert("浏览器不支持 AJAX!");return;}var postParam = '';postParam = "Name=" + $("txtName").value.trim();postParam = postParam + "&Email=" + $("txtEmail").value.trim();postParam = postParam + "&Title=" + $("txtTitle").value.trim();postParam = postParam + "&Message=" + $("txtContent").value.trim();var url = 'AddMessage.aspx';url = url + "?SID=" + Math.random();xmlHttp.onreadystatechange = addMessageOK;xmlHttp.open("POST", url, true);xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//----这句话很重要!xmlHttp.send(postParam); }function addMessageOK()//添加留言板的回调函数 {if(xmlHttp.readyState==4){if(xmlHttp.status==200){//alert('谢谢留言,留言成功!');GuestMessage();clearall();}} }function GuestMessage()//获取留言信息 {xmlHttpGet = getXmlHttp();if (xmlHttpGet == null){alert("浏览器不支持 AJAX!");return;}var url = 'GetMessage.aspx';url = url + "?SID=" + Math.random();xmlHttpGet.onreadystatechange = MessageGetOK;xmlHttpGet.open("GET", url, true);xmlHttpGet.send(null); }function MessageGetOK()//留言的回调函数 {if (xmlHttpGet.readyState == 4) {document.getElementById("ShowMessagePanel").innerHTML = xmlHttpGet.responseText;} }
再来看看jQuery的实现代码:
<script src="js/jquery-1.2.6.js" type="text/javascript"></script> <script type="text/javascript">function GetMsg() {$.ajax({url: "GetMessage.aspx?SID=" + Math.random(),success: function(msg) {$("#ShowMessagePanel").html(msg);}});}$(document).ready(function() {GetMsg();$("#btnSend").bind("click", function() {var name = $("#txtName").val();var email = $("#txtEmail").val();var title = $("#txtTitle").val();var msg = $("#txtContent").val();$.ajax({type: "POST",url: "AddMessage.aspx",data: "Name=" + name + "&Email=" + email + "&Title=" + title + "&Message=" + msg + "",success: function(msg) {alert('添加成功');GetMsg();}});});}); </script>
效果: 实例下载:/Files/gaoweipeng/JQAjax.rar 小结: jQuery给开发中给我们带来了很多方便,使我们在处理Ajax上更简单。这些都是大家有目共睹的。 文章作者:高维鹏(Brian) 文章出处:http://www.cnblogs.com/gaoweipeng
转载于:https://www.cnblogs.com/gxldan/archive/2012/08/09/4066865.html
JQuery-让Ajax变的更简单相关推荐
- 项目管理六大制约因素_知道了这7点,软件项目管理会变得更简单!
软件项目管理,很多产品经理(项目经理)都在吐槽,自己怎么样难以管理,不好做.但是,软件项目管理虽然不易,但是也可以适当把软件项目管理变得更简单,更易于管理.但是需要多做一些管理工作.下面的七点,好好看 ...
- 深入解析 Kubebuilder:让编写 CRD 变得更简单
原文连接:https://developer.aliyun.com/article/719215 作者 | 刘洋(炎寻) 阿里云高级开发工程师 导读:自定义资源 CRD(Custom Resource ...
- 快开宝PDA开单器出入库扫码:让批发零售变得更简单
快开宝PDA开单器出现前 批发商户是这样开单和管理的 ★员工痛苦:需要记客户.价格.库存等等,应对报错价.错漏单.盘错货等各种状况. ★老板麻烦:每天要守店.对单.核账,经常因错漏单.库存乱.积压货. ...
- 转使用Moq让单元测试变得更简单
[ASP.Net MVC3 ]使用Moq让单元测试变得更简单 前几天调查完了unity.现在给我的任务是让我调查Moq. 以下是自己找了资料,总结并实践的内容.如果有表述和理解错误的地方.恳请指正. ...
- Kafka Streams简介: 让流处理变得更简单
Introducing Kafka Streams: Stream Processing Made Simple 这是Jay Kreps在三月写的一篇文章,用来介绍Kafka Streams.当时Ka ...
- Git 配置别名 —— 让命令变得更简单
Git 配置别名 -- 让命令变得更简单 卖一下广告,欢迎大家关注我的微信公众号,扫一扫下方二维码或搜索微信号 stormjun,即可关注. 目前专注于 Android 开发,主要分享 Android ...
- 菏泽话务员机器人方案_智能打电话机器人让电话营销变得更简单
原标题:智能打电话机器人让电话营销变得更简单 如今的生活因人工智能的发展而变的越来越好,特别是进入互联网时代,国内客服环境发生了巨大变化,传统的客服体系正在迫捷升级, 智能打电话机器人的到来对应了企业 ...
- LEARUN快速开发平台,让开发变得更简单
互联网时代,程序员一直是一个令人羡慕的高薪职业.但在不久前有人发出了不一样的意见:程序员现在看似乎是一片光明,但AI和人工智能的发展很快,10年后会怎样呢?会不会程序员的工作都被AI替代了?软件编程也 ...
- java会变得更简单吗_spring 第一篇(1-1):让java开发变得更简单(下)
切面(aspects)应用 DI能够让你的软件组件间保持松耦合,而面向切面编程(AOP)能够让你捕获到在整个应用中可重用的组件功能.在软件系统中,AOP通常被定义为提升关注点分离的一个技术.系统由很多 ...
- 云鲸扫拖一体机器人说明书_让做家务变的更简单:云鲸智能扫拖一体机器人测评...
让做家务变的更简单:云鲸智能扫拖一体机器人测评 2020-02-07 10:57:33 14点赞 19收藏 30评论 一.前言 说到提升生活质量的家用电器,扫地机器人排名绝对能数得着,从早期简单清理到 ...
最新文章
- 微软一站式开发技术框架解决方案 年内展望
- python自学网站 知乎-知乎千赞回答 | 为什么自学python看不进去?
- mac地址扫描源码_iNet Network Scanner扫描网络,及时反馈WiFi信号强度!
- 我的世界手机版java安装失败_我的世界中国版JAVA路径错误的解决方法分享
- 域用户频繁被锁定怎么解决_Oracle11g用户频繁锁定并且解锁后不允许登录
- 新视窗java_《计算机组成原理实验》教学大纲 - 兰州大学信息科学与工程学院.DOC...
- JMeter学习笔记--使用HTTP信息头管理器
- Android四级缓存,RecyclerView的四级缓存-初探
- 我所理解的性能测试是什么?
- 提出离职后怎么定last day_不敢提离职?日本正在兴起的“辞职中介”业务,拯救社畜们于水深火热之中!...
- 秋招复习-后端(C++)
- R语言系列:多元统计分析简介
- mysql sql 限制条数据类型_数据库的数据类型和约束条件
- SuspendLayout,ResumeLayout,Layout,PerformLayout
- 超级计算机中心建设方案,超算中心建设框架
- undo歌词中文音译_T-ara - Lovey Dovey 罗马拼音+中文歌词+韩文歌词+中文音译
- 固态硬盘系统经常假死_固态硬盘经常卡死什么情况
- sm缩写代表什么意思_狗狗各种表情都分别代表着什么意思
- Linux如何固定ip地址,及ifcfg-ens33文件参数
- 技术、艺术与禅道《禅与计算机程序设计艺术》 / 陈光剑