Question

我正在尝试通过AJAX重新加载已动态创建数据的div，但我收到403禁止错误。也许我正在做的事情有些不对劲。你介意帮我吗？提前谢谢。

HTML：

<div id="curr-elem">
    <div class="box-header">
        <h3>Elementary Subject</h3>
    </div>

    <div id="curr-elem-content">
        <table id="curr-elem-tble">
        </table>
    </div>
</div>

jQuery的：

var html;
$.ajax({
    type: 'POST',
    url: 'add_subject.php',
    dataType: 'json',
    data: { 'func_numbr':'2' },
    success: function(data) {
        var activator;
        var disabler;
        var counter_sub = 0 ;

        $.each(data, function(i, item) {
            if (data[i].subj_status == "0") {
                classToAddInactve = "inactiveButton";
                DisableInactve = "disabled=\"disabled\""
                classToAddActve = "";
                DisableActve = ""
            }
            else {
                classToAddInactve = ""
                DisableInactve = ""
                classToAddActve = "inactiveButton";
                DisableActve = "disabled=\"disabled\""
            }

            html = "<tr>";

            html += "<td><lable>Subject: </label><input type='text' name='subject[" + counter_sub + "]' rel='" + data[i].subj_id + "' value='" + data[i].subj_name + "' readonly='readonly'></td>";
            html += "<td><input type='button' rel='#loading-window' id='activate[" + counter_sub + "]' name='active' class='button active modal2 " + classToAddActve + "' value='Apply' " + DisableActve + "> ";
            html += "<input type='button' rel='#loading-window' id='inactivate["+counter_sub+"]' name='active' class='button inactive modal2 " + classToAddInactve + "' value='Remove from list' " + DisableInactve + "></td>";
            html += "</tr>";

            $('#curr-elem-tble').append(html);

            counter_sub = counter_sub +1;
        });
    }     
});

将触发div刷新的JS：

$('.active').live('click', function() {
    var prev = $(this).parent().prev().find('input[type=text]');
    var valText = $(prev).val();
    var relVal = $(this).parent().prev().find('input[type=text]').attr('rel');
    var div = $(this).parent().parent().parent().parent().parent().attr('id');

    $("[id*="+div+"]").hide();

    $.ajax({
        type: 'POST',
        url: 'add_subject.php',
        dataType: 'json',
        data: {
            'func_numbr': '7',
            'subjct_name': valText,
            'subjct_id': relVal
        },
        success: function(data) {
            $('#mask2').hide();
            $('#loading-window').hide();
            $("[id*=" + div + "]").load("[id*=" + div + "]");
        }     
    });
});

Answer 1

在您的success回调中，您使用jQuery.load方法时出错了。 load()需要一个网址，而非一个选择器。

你可能打算做这样的事情：

    success: function(data) {
        $('#mask2').hide();
        $('#loading-window').hide();
        $("[id*=" + div + "]").html(data.someHTMLvar);
    }

Answer 2

首先检查是否可以通过浏览器访问add_subject.php来真正访问它。如果可以，则服务器没有问题。

就像lifo说你以错误的方式使用$.load一样。 $.load接受网址作为第一个参数。

  success: function(data) {
        $('#mask2').hide();
        $('#loading-window').hide();
    }

除此之外，您最好使用handlebars或mustache这样的模板库。这看起来不太好看：

    html = "<tr>";

    html += "<td><lable>Subject: </label><input type='text' name='subject[" + counter_sub + "]' rel='" + data[i].subj_id + "' value='" + data[i].subj_name + "' readonly='readonly'></td>";
    html += "<td><input type='button' rel='#loading-window' id='activate[" + counter_sub + "]' name='active' class='button active modal2 " + classToAddActve + "' value='Apply' " + DisableActve + "> ";
    html += "<input type='button' rel='#loading-window' id='inactivate["+counter_sub+"]' name='active' class='button inactive modal2 " + classToAddInactve + "' value='Remove from list' " + DisableInactve + "></td>";
    html += "</tr>";

或者，如果您不想使用模板库，那么从服务器构建html，这样您就可以使用$.load加载所需的html。

通过ajax动态创建数据来刷新div

2 个答案: