jQuery Ajax

xiangxiongfly9152023-08-15 18:46

文章目录

  • [jQuery Ajax](#jQuery Ajax)
    • 概述
    • load()
    • [.get()](#.get())
    • [.post()](#.post())
    • [.getJSON()](#.getJSON())
    • [.getScript()](#.getScript())
    • [.ajax()](#.ajax())
      • [. a j a x ( ) 替代 .ajax()替代 .ajax()替代.getJSON()](#. a j a x ( ) 替代 .ajax()替代 .ajax()替代.getJSON())
      • [. a j x ( ) 替代 .ajx()替代 .ajx()替代.getScript()](#. a j x ( ) 替代 .ajx()替代 .ajx()替代.getScript())
      • [. a j a x 替代 .ajax替代 .ajax替代.get()](#. a j a x 替代 .ajax替代 .ajax替代.get())

jQuery Ajax

概述

Ajax，全称"Asynchronous JavaScript and XML"，即"异步的JavaScript和XML"。其核心是通过JavaScript的XMLHttpRequest对象，以一种异步的方式，向服务器发送数据请求，并且通过该对象接收请求返回的数据，从而实现客户端与服务器端的数据操作。

Ajax能够刷新指定的页面区域，而不是刷新整个页面，从而减少客户端和服务端之间传输的数据量，提高页面速度，使得用户体验更好。

注意：由于浏览器安全方面的限制，大多数Ajax请求遵守"同源策略"。也就说，Ajax请求无法从不同的域、子域或协议中获取数据。

load()

语法

//参数data省略，则是get()方式
$().load("test.php", function(){ 
    ...... 
}) 
//参数data没有省略，则是post()方式 
$().load("test.php", {name: "xiaoming", age: 18}, function(){ 
    ...... 
})

说明

在jQuery中，可以使用load()方法来通过Ajax请求从服务器中获取数据，然后把获取的数据插入到指定的元素中。

load()方法可以用来加载某一个文件的内容，例如扩展名txt、html和php的文件等。

url参数：加载的页面url。

data参数：发送到服务器的数据。

fn：请求完后的回调。

简单使用

html 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("#wrapper").load("http://localhost/test/hello.txt");
            })
        </script>
    </head>
    <body>
        <div id="wrapper"></div>
    </body>
</html>

加载部分内容

html 复制代码 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
	</head>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("#wrapper").load("http://localhost/test/content.html .select");
		})
	</script>
	<body>
		<div id="wrapper"></div>
	</body>
</html>

说明：只加载.select类名的元素。

传递数据

html 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("#wrapper").load("http://localhost/test/test.php", {
                    name: "小明",
                    age: 18,
                    address: "beijing"
                });
            })
        </script>
    </head>	
    <body>
        <div id="wrapper"></div>
    </body>
</html>

回调函数

html 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("#wrapper").load("http://localhost/test/test.php", {
                    name: "小明",
                    age: 18,
                    address: "beijing"
                }, function(responseText, status, xhr) {
                    console.log(responseText);
                    console.log(status);
                    console.log(xhr);
                });
            })
        </script>
    </head>	
    <body>
        <div id="wrapper"></div>
    </body>
</html>

$.get()

语法

$.get(url, data, fn, type)

说明

在jQuery中，可以使用$.get()方法通过Ajax向服务器请求获取数据。

url参数：加载的url。

data参数：发送到服务器的数据。

fn参数：请求成功后的回调。

type参数：服务器返回的数据格式。text、html、xml、json、script或default。

使用

html 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("#send").click(function() {
                    $.get("http://localhost/test/test_get.php", {
                        name: $("#name").val(),
                        age: $("#age").val(),
                        address: $("#address").val()
                    }, function(data, textStatus, jqXHR) {
                        console.log(data);
                        console.log(textStatus);
                        console.log(jqXHR);
                        $("#comment").html(data);
                    });
                });
            })
        </script>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>用户信息</legend>
                <p><label>姓名：<input id="name" type="text"></label></p>
                <p><label>年龄：<input id="age" type="text"></label></p>
                <p><label>地址：<input id="address" type="text"></label></p>
                <p><input id="send" type="button" value="提交"></p>
            </fieldset>
        </form>
        <h3>评论列表</h3>
        <div id="comment"></div>
    </body>
</html>

$.post()

语法

$.post(url, data, fn, type)

说明

. g e t ( ) 方法和 .get()方法和 .get()方法和.post()方法在使用方式上差不多。

使用

javascript 复制代码 
$.post("http://localhost/test/test.php", {
    name: "小明",
    age: 18,
    address: "beijing"
}, function(data, textStatus, jqXHR) {
    $("#comment").html(data);
});

$.getJSON()

语法

$.getJSON(url ,data, function(data){
    ...... 
})

说明

在jQuery中，可以使用$.getJSON()方法通过Ajax请求获取服务器中JSON格式的数据。

参数url：表示被加载的文件地址。

参数data：表示发送到服务器的数据，数据为"键值对"格式。

参数function(data){}：表示请求成功后的回调函数，请求失败是不会处理的。

使用

html 复制代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
            $(function() {
                $("#btn").click(function() {
                    $.getJSON("http://localhost/test/info.json", function(data) {
                        var str = "";
                        $.each(data, function(index, info) {
                            str += "姓名：" + info["name"] + "<br>";
                            str += "年龄：" + info["age"] + "<br>";
                            str += "性别：" + info["sex"] + "<br>";
                            str += "<hr>";
                        });
                        $("#comment").html(str);
                    });
                });
            })
        </script>
    </head>
    <body>
        <input id="btn" type="button" value="获取" />
        <div id="comment"></div>
    </body>
</html>

$.getScript()

语法

$,getScript(url, 回调函数)

说明

在jQuery中，可以使用$.getScript()方法通过Ajax请求获取并运行一个外部JavaScript文件。

$.getScript()是一个用于动态加载JavaScript的方法。当网站需要加载大量JavaScript时，动态加载JavaScript就是一个比较好的方法。当需要某个功能时，再将相应的JavaScript加载进来。

相对传统的加载方式，$.getScript()方法有以下两个优点：

  • 异步跨域加载JavaScript文件。
  • 可避免提前加载JavaScript文件，只有需要的时候才会去加载。这样可以减少服务器和客户端的负担，加快页面的加载速度。

使用

html 复制代码 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div {
				width: 100px;
				height: 100px;
				background-color: blue;
			}
		</style>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("div").click(function() {
					$.ajaxSetup({
						cache: true
					});
					$.getScript("js/jquery.color.js");
					$(this).animate({
						"width": "150px",
						"height": "150px",
						"background-color": "red"
					}, 1000);
				});
			})
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>

$.ajax()

语法

$.ajax(options)

说明

options是一个对象，这个对象内部有很多参数可以设置，所有参数都是可选的，如下：

. a j a x ( ) 替代 .ajax()替代 .ajax()替代.getJSON()

html 复制代码 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#btn").click(function() {
					$.ajax({
						url: "http://localhost/test/info.json",
						type: "get",
						dataType: "json",
						success: function(data) {
							var str = "";
							$.each(data, function(index, info) {
								str += "姓名：" + info["name"] + "<br>";
								str += "性别：" + info["sex"] + "<br>";
								str += "年龄" + info["age"] + "<br>";
								str += "<hr>";
							});
							$("div").html(str);
						}
					})
				});
			})
		</script>
	</head>
	<body>
		<input id="btn" type="button" value="获取数据">
		<div></div>
	</body>
</html>

. a j x ( ) 替代 .ajx()替代 .ajx()替代.getScript()

html 复制代码 
<!DOCTYPE html>
<html> 
    <head> 
        <meta charset="utf-8" /> 
        <title></title> 
        <script src="js/jquery-1.12.4.min.js"></script> 
        <script> 
            $(function(){ 
                $("#btn").click(function(){ 
                    $.ajax({ 
                        url:"js/test.js", 
                        type:"get", 
                        dataType:"script" 
                    }) 
                }) 
            }) 
        </script> 
    </head> 
    <body> 
        <input id="btn" type="button" value="加载"/> 
    </body> 
</html>

. a j a x 替代 .ajax替代 .ajax替代.get()

html 复制代码 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.12.4.min.js"></script>
		<script>
			$(function() {
				$("#send").click(function() {
					$.ajax({
						url: "http://localhost/test/test_get.php",
						type: "get",
						data: {
							name: $("#name").val(),
							age: $("#age").val(),
							address: $("#address").val()
						},
						success: function(data, textStatus, jqXHR) {

						},
						error: function(jqXHR, textStatus, errorThrown) {

						}
					})
				});
			})
		</script>
	</head>
	<body>
		<form>
			<fieldset>
				<legend>用户信息</legend>
				<p><label>姓名：<input id="name" type="text"></label></p>
				<p><label>年龄：<input id="age" type="text"></label></p>
				<p><label>地址：<input id="address" type="text"></label></p>
				<p><input id="send" type="button" value="提交"></p>
			</fieldset>
		</form>
		<h3>评论列表</h3>
		<div id="comment"></div>
	</body>
</html>
相关推荐
昨天；明天。今天。31 分钟前
案例-博客页面简单实现
前端·javascript·css
萧鼎36 分钟前
JavaScript可视化
javascript
安冬的码畜日常1 小时前
【玩转 JS 函数式编程_008】3.1.2 JavaScript 函数式编程筑基之：箭头函数——一种更流行的写法
开发语言·javascript·ecmascript·es6·this·箭头函数
小爱丨同学2 小时前
宏队列和微队列
前端·javascript
沉登c2 小时前
Javascript客户端时间与服务器时间
服务器·javascript
持久的棒棒君2 小时前
ElementUI 2.x 输入框回车后在调用接口进行远程搜索功能
前端·javascript·elementui
小程xy5 小时前
react 知识点汇总（非常全面）
前端·javascript·react.js
非著名架构师6 小时前
js混淆的方式方法
开发语言·javascript·ecmascript
多多米10057 小时前
初学Vue（2）
前端·javascript·vue.js
敏编程7 小时前
网页前端开发之Javascript入门篇(5/9)：函数
开发语言·javascript
热门推荐
01【经验分享】Ubuntu22.04安装微信(linux官方版)02安卓系列机型永久去除data分区加密 详细步骤解析032024年高教社杯数学建模国赛C题超详细解题思路分析04【极空间NAS】使用WebDAV服务 + DDNSTO内网穿透 实现思源笔记的内外网同步05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07CTF网络安全大赛简单的web抓包题目：HEADache08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10Coze扣子平台完整体验和实践（附国内和国际版对比）