JavaScript基础-JQuery应用《下》

最新推荐文章于 2024-09-29 10:43:45 发布

转载最新推荐文章于 2024-09-29 10:43:45 发布 · 104 阅读

文章标签：

#学习历程记录

前端专栏收录该内容

21 篇文章

订阅专栏

本文深入解析了使用JQuery进行Ajax操作的方法，包括GET、POST请求及错误处理，并详细介绍了JSON数据格式的定义与遍历技巧，是前端开发者的实用指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Jquery封装Ajax操作

1、$.ajax请求方式：格式

function  fun() {
	$.ajax({
		url:"ajaxServlet" , 
		type:"POST" , 
		data:{"username":"jack","age":23},
		success:function (data) {
			alert(data);
		},
		error:function () {
			alert("出错啦...")
		},
		dataType:"json"
       });
}

2、$.get请求方式：格式

$.get(url,[data],[fn],[type])：必须遵循参数顺序

url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
callback: 载入成功时回调函数。
type: 返回内容格式，xml, html, script, json, text, _default。

//定义方法
function  fun() {
    $.get(
    		"ajaxServlet",
		    {username:"rose"},
		    function (data) {alert(data);},
			"text"
		);
}

3、$.post请求方式:格式

jQuery.post(url, [data], [callback], [type])：必须遵循参数顺序

url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
callback: 载入成功时回调函数。
type: 返回内容格式，xml, html, script, json, text, _default。

//定义方法
function  fun() {
	$.post(
			"ajaxServlet",
			{username:"rose"},
			function (data) {alert(data);},
			"text"
		);
}

二、Json数据格式的使用

Json格式定义/遍历

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="js/jquery-2.1.0.min.js"></script>
	
	<script>
		//1.定义基本格式
		var person = {"name": "张三", age: 23, 'gender': true};
		var ps = [
			{"name": "张三", "age": 23, "gender": true},
			{"name": "李四", "age": 24, "gender": true},
			{"name": "王五", "age": 25, "gender": false}
		];
		
		//2.遍历person
		for (var key in person) {
			alert(key + ":" + person[key]);
		}
		
		//3.遍历ps
		//a.js方式遍历
		for (var i = 0; i < ps.length; i++) {
			for (var key in ps[i]) {
				alert(key + ":" + ps[i][key]);
			}
		}
		//b.for in 方式遍历
		for (var p in ps) {
			for (var key in ps[p]) {
				alert(key + ":" + ps[p][key]);
			}
		}
		//c.$.each方式遍历
		$.each(ps, function (i, item) {
			$.each(item, function (k, v) {
				alert(k + ":" + v);
			})
		})
	</script>
</head>
<body>
</body>
</html>

原文：https://blog.youkuaiyun.com/mollen/article/details/83029169