jquery如何在load事件中解析json

时间:2013-07-05 08:25:58

标签: jquery jquery-ui

我有点问题。我正在使用以下代码打开jQuery对话框:

$('#dialog').html('<img src="img/ajax-loader.gif" width="100" height="100" />');
$('#dialog').dialog({
    autoOpen: true,
    closeOnEscape: true,
    modal: true,
    position: ['center', 'center'],
    title: _title,
    autoResize:true,
    width: 'auto',
    buttons: {
        "Ok": function() {
            $( this ).dialog( "close" );
        }
    }
    }).load(url, function(data) {
        var arr=$.parseJSON(data);
        console.log('Rez' + arr['result']);
        console.log('result_msg' + arr['result_msg']);
        $.each(arr, function (index, value) {
            if ($.type(value) === 'object')
            {
                console.log('rid: '+ value['rid']);
                console.log('rnos: '+ value['rnos']);
            }
        });
        $(this).dialog("option", "position", ['center', 'center'] );
    });

如果我获取HTML,一切都很好用。但是,如果我获取json,那么我如何格式化它并在#dialog div中显示给用户?

如果我在#dialog打开后使用ajax调用,则#dialog内容不会改变。有没有办法将自定义成功回调添加到load事件?

如果我先加载所有内容然后再打开对话框,它就不会位于屏幕中心。

如果我运行此代码:

$('#dialog').html('<img src="img/ajax-loader.gif" width="100" height="100" />');
$('#dialog').dialog({
    autoOpen: true,
    closeOnEscape: true,
    modal: true,
    position: ['center', 'center'],
    title: _title,
    autoResize:true,
    width: 'auto',
    buttons: {
        "Ok": function() {
            $( this ).dialog( "close" );
        }
    }
    });
    $.ajax({
        dataType : 'json',
        type: "GET",
        url: url,
        success: function(server_response){
            console.log(server_response);
            $('#dialog').html('vv'); // <---- even this doesn't shows
            switch(server_response.result)
            {
                case 'choose':
                    var linki = '';
                    $.each(server_response, function (index, value) {
                        if ($.type(value) === 'object')
                        {
                            linki += '<a href="javascript:;">'+ value['rnos'] +'</a>';
                            //console.log('rid: '+ value['rid']);
                            //console.log('rnos: '+ value['rnos']);
                        }
                    });
                    console.log('Loading HTML: ' + linki);
                    $('#dialog').html(linki);
                break;
                default: $('#dialog').html(server_response.result_msg);
            }
            $('#dialog').dialog("option", "position", ['center', 'center'] );
        }
    });

然后#dialog内容不会改变。

===编辑===

这是修改后的load事件,可以完成我需要的事情,但我不确定它是不是很好。

$('#dialog').dialog({...}).load(url, function(data) {
            var arr=$.parseJSON(data);
            $(this).html('<img src="img/ajax-loader.gif" width="100" height="100" />');
            console.log('Rez' + arr['result']);
            console.log('result_msg' + arr['result_msg']);

            switch(arr.result)
            {
                case 'choose':
                    var linki = '';
                    $.each(arr, function (index, value) {
                        if ($.type(value) === 'object')
                        {
                            linki += '<a href="javascript:;">'+ value['rnos'] +'</a><br />';
                            //console.log('rid: '+ value['rid']);
                            //console.log('rnos: '+ value['rnos']);
                        }
                    });
                    console.log('Ielādējam HTML: ' + linki);
                    $(this).html(linki);
                break;
                default: $(this).html(arr.result_msg);
            }



            $(this).dialog("option", "position", ['center', 'center'] );

        })

2 个答案:

答案 0 :(得分:0)

如果AJAX服务器返回HTML,则只应使用.load()。如果它返回其他内容并且您需要先处理数据,则应使用$.get()。回调函数应该执行将数据转换为HTML所需的任何操作,然后执行:

$("#dialog").dialog({
    // options 
}).html(result);

答案 1 :(得分:0)

你尝试过ajax功能吗?

$.ajax({
    type : "POST",
    url : youURL,
    cache : false,
    dataType : 'json',
    data : yourDATA
}).done(function(msg)
{
//ok
}).fail(function()
{
//nok
});

通过将dataType指定为json,您无需在msg变量

上使用parseJSON