jQuery -- 光阴似箭（五）：AJAX 方法

jQuery -- 知识点回顾篇（五）：AJAX 方法

1. $.ajax 方法：用于执行 AJAX（异步 HTTP）请求。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js" ></script><script type="text/javascript" >    $(function(){ //语法格式：$.ajax({name:value, name:value, ... })//该参数规定 AJAX 请求的一个或多个名称/值对。
            $("#btn_ajax").click(function(){$.ajax({url:"Test_ajax.aspx",success:function(result){$("#myDiv1").html(result);}});});});</script>
</head>
<body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;"></div>   
</body>
</html>

 

2. $.ajaxSetup() 方法：为将来的 AJAX 请求设置默认值。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" >    $(function(){ //语法格式：$.ajaxSetup({name:value, name:value, ... })//该参数为带有一个或多个名称/值对的 AJAX 请求规定设置。
            $("#btn_ajax").click(function(){$.ajaxSetup({url:"Test_ajax.aspx",success:function(result){$("#myDiv1").html(result);}});$.ajax();});});</script>
</head>
<body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;"></div>   
</body>
</html>

 

3. $.get() 方法：使用 HTTP GET 请求从服务器加载数据。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js" ></script><script type="text/javascript" >    $(function(){ //语法格式：$.get(URL,data,function(data,status,xhr),dataType)//URL: 必需参数。规定您需要请求的 URL。//data:    可选参数。规定连同请求发送到服务器的数据。//function(data,status,xhr)：可选参数。规定当请求成功时运行的函数。//dataType：可选参数。规定预期的服务器响应的数据类型。
            $("#btn_ajax").click(function(){$.get("Test_ajax.aspx",function(data){alert("数据: "   data );});});});</script>
</head>
<body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;"></div>   
</body>
</html>

 

4. $.getJSON() 方法：使用 AJAX 的 HTTP GET 请求获取 JSON 数据。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" >    $(function(){$("#btn_ajax").click(function(){//语法格式： $(selector).getJSON(url,data,success(data,status,xhr))//url：必需参数。规定将请求发送到哪个 URL。//data：可选参数。规定发送到服务器的数据。//success(data,status,xhr)：可选参数。规定当请求成功时运行的函数。
                $.getJSON("Test_ajax.aspx",function(result){$("myDiv1").text(result);});});});</script>
</head>
<body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;"></div>   
</body>
</html>

 

5. $.getScript() 方法：使用 AJAX 的 HTTP GET 请求获取和执行 JavaScript。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" >    $(function(){$("#btn_ajax").click(function(){//语法格式： $(selector).getScript(url,success(response,status))//url: 必需参数。规定将请求发送到哪个 URL。//success(response,status)： 可选参数。规定当请求成功时运行的函数。
                $.getScript("Test_ajax_script.js");});});</script>
</head>
<body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;"></div>   
</body>
</html>

 

6. $.param() 方法创建数组或对象的序列化表示形式。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" >    $(function(){personObj=new Object();personObj.name="xiaohuzi";personObj.age=26;personObj.web="xiaohuzi.test.com"; //语法格式：$.param(object,trad)//object: 必需参数。规定要序列化的数组或对象。//trad: 可选参数。布尔值，指定是否使用参数序列化的传统样式。
            $("#btn_ajax").click(function(){$("#myDiv1").text($.param(personObj));});});</script>
</head>
<body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;"></div>   
</body>
</html>

 

7. $.post() 方法：使用 HTTP POST 请求从服务器加载数据。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" >    $(function(){//语法格式：$(selector).post(URL,data,function(data,status,xhr),dataType)//URL: 必需参数。规定将请求发送到哪个 URL。//data: 可选参数。规定连同请求发送到服务器的数据。//function(data,status,xhr): 可选参数。规定当请求成功时运行的函数。//dataType: 可选参数。规定预期的服务器响应的数据类型。
            $("#btn_ajax").click(function(){$.post("Test_ajax.aspx",function(data){alert("Data: "   data );});});});</script>
</head>
<body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;"></div>   
</body>
</html>

 

8. ajaxComplete() 方法：规定 AJAX 请求完成时运行的函数。

　ajaxStart() 方法：规定 AJAX 请求开始时运行的函数。

   ajaxSend() 方法：规定 AJAX 请求即将发送时运行的函数。

   ajaxError() 方法：规定 AJAX 请求失败时运行的函数。

   ajaxStop() 方法：规定所有的 AJAX 请求完成时运行的函数。

   ajaxSuccess() 方法：规定 AJAX 请求成功完成时运行的函数。

   load() 方法：从服务器加载数据，并把返回的数据放置到指定的元素中。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" >    $(function(){//语法格式：$(document).ajaxSend(function(event,xhr,options))//function(event,xhr,options)     必需。规定当请求成功时运行的函数。
            $(document).ajaxSend(function(){$("#myDiv1").css("border","5px solid pink");});//语法格式：$(document).ajaxStart(function())//function(): 必需参数。规定当 AJAX 请求开始时运行的函数。
            $(document).ajaxStart(function(){$("#myDiv1").css("display","block");});//语法格式：$(document).ajaxStop(function())//function(): 必需参数。规定所有的 AJAX 请求完成时运行的函数。
            $(document).ajaxStop(function(){$("#myDiv1").css("border","3px solid green");});//语法格式：$(document).ajaxError(function(event,xhr,options,exc))//function(event,xhr,options,exc)：必需参数。规定当请求失败时运行的函数。
            $(document).ajaxError(function(){$("#myDiv1").css("border","3px solid red");});//语法格式：$(document).ajaxSuccess(function(event,xhr,options))//function(event,xhr,options): 必需参数。规定如果请求成功时运行的函数。
            $(document).ajaxSuccess(function(){$("#myDiv1").css("border","3px solid yellow");});//语法格式：$(document).ajaxComplete(function(event,xhr,options))//function(event,xhr,options)： 必需参数。规定当请求完成时运行的函数。
            $(document).ajaxComplete(function(){$("#myDiv1").css("display","none");});//语法格式：$(selector).load(url,data,function(response,status,xhr))//url：必需参数。规定您需要加载的 URL。//data：可选参数。规定连同请求发送到服务器的数据。//function(response,status,xhr)：可选参数。规定 load() 方法完成时运行的回调函数。
            $("#btn_ajax").click(function(){$("#txt").load("Test_ajax.aspx");});});</script>
</head>
<body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;"></div>   
</body>
</html>

 

9. serialize() 方法：通过序列化表单值创建 URL 编码文本字符串。

    serializeArray() 方法：通过序列化表单值来创建对象（name 和 value）的数组。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" >    $(function(){//语法格式：$(selector).serialize()//您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。//序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
            $("#btn_serialize").click(function(){$("#myDiv1").text($("form").serialize());});//语法格式：$(selector).serializeArray()//serializeArray() 方法通过序列化表单值来创建对象（name 和 value）的数组。//您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。
            $("#btn_serializeArray").click(function(){x=$("form").serializeArray();$.each(x, function(i, field){$("#myDiv2").append(field.name   ":"   field.value   "   ");});});});</script>
</head>
<body><form action="">姓名: <input type="text" name="Name" value="XiaoHuzi" /><br>年龄: <input type="text" name="Age" value="26" /><br>工作: <input type="text" name="Job" value="IT" /><br></form><button type="button" id="btn_serialize">serialize</button><button type="button" id="btn_serializeArray">serializeArray</button><div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;"></div> <div id="myDiv2" style="height:30px;padding: 10px;border:2px solid green;"></div>   
</body>
</html>

　　

 


更多专业前端知识，请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/366156.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ggplot2设置坐标轴范围_R语言数据可视化| ggplot2中会“分身术”的facet_wrap()与facet_grid()...

ggplot2设置坐标轴范围_R语言数据可视化| ggplot2中会“分身术”的facet_wrap()与facet_grid()...

【R语言】高维数据可视化| ggplot2中会“分身术”的facet_wrap()与facet_grid()姐妹花​mp.weixin.qq.comfacet_grid()形成由行和列面化变量定义的面板矩阵。当有两个离散变量&#xff0c;并且这些变量的所有组合存在于数据中时&#xff0c;它是最有用的。如果只有一个具有多个…
阅读更多...
使用Google GSON：额外的赠品：第一部分

使用Google GSON：额外的赠品：第一部分

介绍 这是以前的Google GSON入门的后续文章&#xff0c;其中显示了有关使用Google Gson的入门资料。 本文显示了GSON库的一些其他优点。 由于有很多关于这些额外功能的文章要写&#xff0c;所以我将长篇文章分成2个系列&#xff0c;因此&#xff0c;这是其中一部分&#xff0c…
阅读更多...
HDU 2181 哈密顿绕行世界问题 （dfs）

HDU 2181 哈密顿绕行世界问题 （dfs）

哈密顿绕行世界问题 Crawling in process... Crawling failed Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status Description 一个规则的实心十二面体&#xff0c;它的 20个顶点标出世界著名的20个城市&#xff0c;你从一个城…
阅读更多...
php resque 计划任务,PHP-RESQUE - 实现重试

php resque 计划任务,PHP-RESQUE - 实现重试

因为PHP-Resque 的重试部分需要自己写&#xff0c;网上又没啥轮子&#xff0c;而且resque也已经很久不更新了&#xff0c;所以自己研究下resque的源码&#xff0c;然后也借鉴了Laravel的队列重试机制&#xff0c;实现了PHP-Resque的重试机制。Resque地址设计思路1.这里需要阅读…
阅读更多...
RabbitMQ集群、镜像部署配置

RabbitMQ集群、镜像部署配置

1 RABBITMQ简介及安装 RabbitMQ是一个开源的AMQP实现&#xff0c;服务器端用Erlang语言编写&#xff0c;支持多种客户端&#xff0c;如&#xff1a;Python、Ruby、.NET、Java、JMS、C、PHP、ActionScript、XMPP、STOMP等&#xff0c;支持AJAX。用于在分布式系统中存储转发消息…
阅读更多...
C语言、c++实现超好玩植物大战僵尸(完整版附源码）

C语言、c++实现超好玩植物大战僵尸(完整版附源码）

实现这个游戏需要Easy_X main.cpp //开发日志 //1导入素材 //2实现最开始的游戏场景 //3实现游戏顶部的工具栏 //4实现工具栏里面的游戏卡牌 #define WIN_WIDTH 900 #define WIN_HEIGHT 600 //定义植物类型 enum { WAN_DOU, XIANG_RI_KUI, ZHI_WU_COUNT }; #include<stdio.…
阅读更多...
【代码笔记】Web-HTML-颜色

【代码笔记】Web-HTML-颜色

一&#xff0c;效果图。 二&#xff0c;代码。 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>html 颜色</title> </head> <body> <!--html 颜色--> <p style"">> 通过十六…
阅读更多...
java 如何去掉http debug日志_你居然还去服务器上捞日志，搭个日志收集系统难道不香吗？...

java 如何去掉http debug日志_你居然还去服务器上捞日志，搭个日志收集系统难道不香吗？...

作者&#xff1a;MacroZheng链接&#xff1a;https://juejin.im/post/5eef217d51882565d74fb4eb来源&#xff1a;掘金SpringBoot实战电商项目mall&#xff08;35kstar&#xff09;地址&#xff1a;http://github.com/macrozheng/…摘要ELK日志收集系统进阶使用&#xff0c;本文…
阅读更多...
GitHub的10,000个最受欢迎的Java项目-以下是它们使用的顶级库

GitHub的10,000个最受欢迎的Java项目-以下是它们使用的顶级库

随着Java开发人员正在使用既成熟又高度发展的语言来工作&#xff0c;无论何时编写新代码&#xff0c;我们都将面临一个持续的难题–使用大家都在谈论的热门新技术&#xff0c;或者坚持使用久经考验的库&#xff1f; 由于Java应用程序的很大一部分是商业性质的&#xff0c;因此…
阅读更多...
JavaScript 事件机制（四）

JavaScript 事件机制（四）

JavaScript 事件机制 1 什么是事件 JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说&#xff0c;我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件…
阅读更多...
php设计是什么意思,php – 什么是更好的设计？

php设计是什么意思,php – 什么是更好的设计？

我有以下课程&#xff1a;class User {public function setName($value) { ... }public function setEmailAddress($value) { ... }public function setUsername($value) { ... }public function getName() { ... }public function getEmailAddress() { ... }public function g…
阅读更多...
JavaScript——根据数组中的某个值进行排序

JavaScript——根据数组中的某个值进行排序

我这里是根据次数进行倒叙,可根据自己情况进行修改 function sortKey(array,key){return array.sort(function(a,b){var x a[key];var y b[key];return ((x>y)?-1:(x<y)?1:0)}) }; 转载于:https://www.cnblogs.com/wangyang0210/p/10185494.html
阅读更多...
Java防止Xss注入json_每日一题（java篇） 如何防止xss注入

Java防止Xss注入json_每日一题（java篇） 如何防止xss注入

1、XssAndSqlHttpServletRequestWrapper 类&#xff1a;import java.util.regex.Pattern; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletRequestWrapper; public class XssAndSqlHttpServletRequestWrapper extends HttpServletReques…
阅读更多...
【工具相关】web-HTML/CSS/JS Prettify的使用

【工具相关】web-HTML/CSS/JS Prettify的使用

一&#xff0c;打开Sublime Text,代码如下面所示。 二&#xff0c;鼠标右键--->HTML/CSS/JS Prettify--->Prettify Code.代码如图所示&#xff0c;明显的代码变得整齐了。 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com
阅读更多...
centos 多个mysql,Centos中安装多个MySQL数据的配置实例

centos 多个mysql,Centos中安装多个MySQL数据的配置实例

这篇文章主要为大家详细介绍了Centos中安装多个MySQL数据的配置实例&#xff0c;具有一定的参考价值&#xff0c;可以用来参考一下。感兴趣的小伙伴&#xff0c;下面一起跟随512笔记的小编小韵来看看吧&#xff01;注:本文档做了两个MYSQL实例,多个实例方法以此类推LINUX操作系…
阅读更多...
MS SQL 分页存储过程

MS SQL 分页存储过程

最近换了家新公司&#xff0c;但是新公司没有使用分页的存储过程。那我就自个写一个往项目上套 &#xff08;效率怎么样就不怎么清楚没有详细的测试过&#xff09; CREATE PROCEDURE [dbo].[pro_common_pageList](tab NVARCHAR(MAX) ,---表名PrimaryKey VARCHAR(100) , --主键I…
阅读更多...
了解Spring Web初始化

了解Spring Web初始化

几年前&#xff0c;我们大多数人习惯到处编写XML配置文件&#xff0c;甚至可以设置简单的Java EE应用程序。 如今&#xff0c;使用Java或Groovy来配置项目已成为一种首选方式–您只需要看一下Spring框架的其他版本中引入的Gradle或功能&#xff0c;就可以对此进行总结。 现在&…
阅读更多...
STM32CubeMX HAL库串口+DMA数据发送不定长度数据接收

STM32CubeMX HAL库串口+DMA数据发送不定长度数据接收

参考资料&#xff1a;1、ST HAL库官网资料 2、https://blog.csdn.net/u014470361/article/details/79206352#comments 一、STM32CubeMX配置外部时钟 注意在进行外部时钟配置时&#xff0c;即“High Speed Clock”和“Low Speed Clock”需配置成“Crytal/Ceramic Resonator&…
阅读更多...
浅谈自记忆函数

浅谈自记忆函数

浅谈自记忆函数 最近阅读《JavaScript忍者秘籍》看到了一种有趣的函数&#xff1a;自记忆函数。 简介 何为自记忆函数&#xff1f;书中提到&#xff1a; 记忆化&#xff08;memoization&#xff09;是一种构建函数的处理过程&#xff0c;能够记住上次计算结果 通过这句话可以…
阅读更多...
pyqt5 qlabel无法显示图片_实战PyQt5: 011-单选框控件QRadioButton

pyqt5 qlabel无法显示图片_实战PyQt5: 011-单选框控件QRadioButton

单选框QRadioButton简介QRadioButton为单选按钮&#xff0c; 可以选中(打开)或者取消选中(关闭)。在一组单选按钮中&#xff0c;一次只能选中其中的一个按钮。选中或者取消选中QRadioButton&#xff0c; 都会发出toggled()信号。使用isChecked()可以查看是否选择了某个QRadioBu…
阅读更多...
最新文章

Copyright @ 2022~2023