JavaScript基础-JQuery应用《下》

迈不过友情╰ 2022-02-15 09:11 198阅读 0赞

**一、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.csdn.net/mollen/article/details/83029169][https_blog.csdn.net_mollen_article_details_83029169]

[https_blog.csdn.net_mollen_article_details_83029169]: https://blog.csdn.net/mollen/article/details/83029169