Ajax URL多参数实现提交时的等待动画功能

最新推荐文章于 2021-08-06 19:23:10 发布

原创

最新推荐文章于 2021-08-06 19:23:10 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajsx #url 多参数 #等待动画 #jquery #beforeSend

本文介绍了如何使用Ajax的POST方法处理URL多参数提交，通过将参数转换为data对象确保稳定性。同时，文章详细讲解了如何在提交过程中添加等待动画效果，利用jQuery easyUI CSS创建动画，并在ajax的beforeSend中实现实现对话框关闭和遮罩显示，以提供更好的用户体验。

需求：在提交时采用ajax的POST方法，并实现动画功能。

1、URL多参的解决：URL请求时，带了几个参数，尝试"url?a="+a+"&b"+b时，发现稳定性不佳，经常丢失第2个参数，于是改为data:{key:value,key2:value2}的形式，完美解决。

dataType: 'json',
url: $url,
data: {period: $('#period').find("option").val(), citycode: citycode.getValue()},

2、提交时的等待动画：

A。先用jquery easyUI css建效果

function ajaxLoading() {
    $("<div class=\"datagrid-mask\"></div>").css({
        display: "block",
        width: "100%",
        height: $(window).height()
    }).appendTo("body");
    $("<div class=\"datagrid-mask-msg\"></div>").html("正在处理，请稍候。。。").appendTo("body").css({
        display: "block",
        left: ($(document.body).outerWidth(true) - 190) / 2,
        top: ($(window).height() - 45) / 2
    });
}

function ajaxLoadEnd() {
    $(".datagrid-mask").remove();
    $(".datagrid-mask-msg").remove();
}

B、接着在ajax中将动画放上去，因为有dialog对话框，先要将dialog关闭，再加上遮罩，在beforeSent中实现，代码：