jquery实战总结

1、$.getJSON用法(此写法有缓存问题，须在url上加入random解决)

 $.getJSON(url + '?Action=GetWavUrl&randv='+Math.random(), { LuYinID: LuYinID }, function (d) {
        if (d.success) {
           PlayClick(d.message);
        }
        else
            alert(d.message);

    });

2、$.ajax基本用法

    $.ajax({
        type: "post",
        url: url,
        data: { Action: 'xxxxxxx', DateSelectIndex: DateSelectIndex, AreaName: AreaName },
        success: function (data) {

            var d = JSON.parse(data);
            if (d.success == false) {
                alert("'xxxxxxx'发生错误:" + d.message);
            }
            var rate = d.rate;

            var option = myChart1.getOption();

            option.series[0].data[1].value = 100 - rate[0];
            option.series[0].data[2].value = rate[0];
            option.series[1].data[1].value = 100 - rate[1];
            option.series[1].data[2].value = rate[1];
            option.series[2].data[1].value = 100 - rate[2];
            option.series[2].data[2].value = rate[2];
            option.series[3].data[1].value = 100 - rate[3];
            option.series[3].data[2].value = rate[3];
            myChart1.setOption(option);
            myChart1.hideLoading();
            var Borad = $(".group-char-left").eq(1);
            Borad.find(".divshade").hide();
        },
        error: function (XMLHttpRequest, textStatus) {
            console.log(XMLHttpRequest);
            var result = eval("(" + XMLHttpRequest.responseText + ")");
            alert(result.exception.message);

        }
    });

3、$.ajax 上传附件

前端代码：

        <div class="table">
            <ul class="table-tbody">
                <li style="text-align:center">                    
                    <span>报表导入</span><input id="fileinput"  type="file" /> <button id="btnBatchQuery" class="btn" style="width: 100px">批量查询</button>
                </li>
            </ul>
        </div>

js代码：

    $("#btnBatchQuery").click(function () {
        var filePath = $("#fileinput").val();
        if (filePath.indexOf("xls") != -1 || filePath.indexOf("xlsx") != -1) {
            var formData = new FormData();
            formData.append("file", $("#fileinput")[0].files[0]);

            $.ajax({
                url: url + "?Action=UploadFile",
                async: false,
                type: 'POST',
                data: formData,
                // 告诉jQuery不要去处理发送的数据
                processData: false,
                // 告诉jQuery不要去设置Content-Type请求头
                contentType: false,
                beforeSend: function () {
                    top.$("#loading").show();
                },
                success: function (data) {
                    $("#loading").hide();
                    var tabledata = $.parseJSON(data);
                    $.messager.alert("操作提示", "共查询到" + tabledata.total + "条记录");
                    $('#' + tableid).datagrid('loadData', tabledata); //将数据绑定到datagrid     
                },
                error: function (responseStr) {
                    top.$("#loading").hide();
                }
            });
        } else {
            alert("您未上传文件，或者您上传文件类型有误！")
            return false;
        }
    });

后端c#:

 if (Action == "UploadFile")
            {
                try
                {
                    HttpPostedFile file = context.Request.Files[0];
                    DataTable dt = Util.ReadDataTableFromExcel(file.InputStream);
                }
                catch (Exception ex)
                {
                    context.Response.Write(JSONhelper.ToJson(new { success = false, message = ex.ToString() }));

                }
            }

4、$.Deferred回调函数对于超长时间脚本显示等待界面的应用

function Load(DateSelectIndex,SelectDiShiName)
{
    try {
        $("#loading").show();
        var dtd1 = LoadCard0ZhiShu(); //面板1
        var dtd2 = LoadCard0Map(DateSelectIndex); //面板1
        var dtd3 = LoadCard0QiPao(DateSelectIndex);//面板1
        var dtd4 = LoadCard1Map(DateSelectIndex);//面板2
        var dtd5 = LoadCard1YeWuRank(DateSelectIndex, SelectDiShiName);//面板2

        $.when(dtd1, dtd2, dtd3, dtd4, dtd5).done(function () {
            $("#loading").hide();
        }).fail(function () {
            $("#loading").hide();
        });
    } catch (e) {
        //alert(e);
        $("#loading").hide();
    }
}

function LoadCard0ZhiShu()
{
    var dtd = $.Deferred();

    $.ajax({

        type: "post",

        url: "ashx/index.ashx",

        data: { Action: 'LoadCard0ZhiShu' },
        success: function (data) {
            var d =JSON.parse(data);
            if (d.success == false) {
                alert("LoadCard0ZhiShu发生错误:" + d.message);
            }            
        },
        error: function (XMLHttpRequest, textStatus) {
            var result = eval("(" + XMLHttpRequest.responseText + ")");
            alert(result.exception.message);
        }
    }).then(function () {
        dtd.resolve();
    });
    return dtd;
}

5、jquery对于下拉框的常用操作

(1)取得选择项的序号：$("#selectid").get(0).selectedIndex

(2)取得选中项的文本:$("#selectid").find("option:selected").text()

(3)取得选中项的值:$("#selectid").val();

(4)设置value为aaa的项选中：$("#selectid").val("aaa");

(5)设置text为aaa的项选中：$("#selectid").find("option[text='aaa']").attr("selected",true);

(6)清空选择项：$("#selectid").empty();

(7)增加选择项：            var option = $("<option>").val(d[i].地市缩写).text(d[i].地市名称);
            $("#selectid").append(option);

(8)选择项改变事件写法:

    $("#selectid").change(function () {
        Load($("#selectid").val());
    });

6、js方法：JSON.parse和 JSON.stringify用法

        

            $.ajax({

                type: "post",

                url: "ashx/loginhandler.ashx?Action=Login",

                data: { username: $('#username').val(), password: $('#password').val(), validateCode: $('#rand_code').val(), savedays: savedays},

                success: function (data) {

                    var d = JSON.parse(data); //将返回的字符串解析为json对象

                }

            });

   

function createParam(action,keyid)
{
    var o = {};
    var form = $('#YumMonitorForm');
    var query = '';
    if (form) {
        query = $('#YumMonitorForm').serializeArray();
        query = convertArray(query);
        o.jsonEntity = JSON.stringify(query);
    }
    o.action = action;
    o.keyid = keyid;
    return "json=" + encodeURIComponent(JSON.stringify(o));
}

备注:encodeURIComponent可以将&等特殊字符串转义，否则前端输入&时后端解释可能会出错。