jq的ajax

最新推荐文章于 2024-07-29 20:46:57 发布

hangGe0111

最新推荐文章于 2024-07-29 20:46:57 发布

阅读量274

点赞数

分类专栏：轮子文章标签： ajax

本文链接：https://blog.csdn.net/hangGe0111/article/details/80901542

版权

轮子专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客主要介绍了jQuery中AJAX的使用，包括POST和GET请求的参数处理，指出POST请求的参数可见而GET不可见，同时提及了base64加密解密在参数处理中的应用，并提到了适用于IE10+的window.btoa()和window.atob()方法。文章还提供了W3school和相关博客的参考资料链接，以便深入学习。

摘要由CSDN通过智能技术生成

1.请求

1.1 POST请求

function listhttp(listtype){
	$.ajax({
		url: 'http//xxx/api',
		type: 'POST',
		data:{"type_num":listtype},
		dataType: 'json',
		success: function(res) {
			var arr=res.data;
			if(res.code == 1){
				var str='';
				for(var i=0;i<arr.length;i++){
					str+='<li>'+
							'<a href="http://xxx'+arr[i].id+'.html?RouteParm='+window.btoa('goodsId='+arr[i].id)+'">'+
            					'<div style="background-image:url('+arr[i].pic1+');">'+
            						'<div class="bgsize100100"></div>'+
            						'<div class="list_b cap">'+
            							'<span class="list_address">'+arr[i].address+'</span>'+
										'<span class="list_ul_area">'+arr[i].area+'</span>'+
										'<span class="list_ul_ts">'+arr[i].room+'室'+arr[i].hall+'厅'+'</span>'+ 		               				
            						'</div>'+
            					'</div>'+
            				'</a>'+
        				'</li>'
				}
				
				$(".list").html(str);

			}else{
				alert(res.msg)
			}			
		}
		
	});
}

1.2 get 请求

function listhttp(listtype){
    $.ajax({
        url: 'http//xxx/api?type_num='+listtype,
        type: 'GET',
        dataType: 'json',
        success: function(res) {
            var arr=res.data;
            if(res.code == 1){
                var str='';
                for(var i=0;i<arr.length;i++){
                    str+='<li>'+
                            '<a href="http://xxx'+arr[i].id+'.html?RouteParm='+window.btoa('goodsId='+arr[i].id)+'">'+
                                '<div style="background-image:url('+arr[i].pic1+');">'+
                                    '<div class="bgsize100100"></div>'+
                                    '<div class="list_b cap">'+
                                        '<span class="list_address">'+arr[i].address+'</span>'+
                                        '<span class="list_ul_area">'+arr[i].area+'</span>'+
                                        '<span class="list_ul_ts">'+arr[i].room+'室'+arr[i].hall+'厅'+'</span>'+ 		               				
                                    '</div>'+
                                '</div>'+
                            '</a>'+
                        '</li>'
                }
                
                $(".list").html(str);

            }else{
                alert(res.msg)
            }			
        }
        
    });
}

2.几点说明：

(1)对于post请求参数写在 "data:{参数}" 这里，对于get请求参数写在 “ url:'http//xxx.xxx.com/api/app/get-project-type?params1=1&params2=2(参数)' ”;

(2)对于post请求各个参数可以在请求路径后看到，而get请求看不到，和vue的axios.get和axios.post相同；

(3)如果参数需要加密处理可以通过window.btoa()进行base64加密处理的，该方法具有兼容(IE10+)问题，window.atob()进行base64解密；

(4) 对于有条件的循环，结束当前循环，但继续执行后面的语句可用break。

3.详细信息请参考

(1)W3school地址：W3school

(2)推荐博客地址：$.ajax()方法详解