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

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;
        });
    }     
});

将触发

刷新的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 + "]");
        }     
    });
});

- Aoi

---

首先检查URL add_subject.php。HTTP 403 表示服务器可以被访问，但拒绝了请求的访问。 - Toni Toni Chopper

尝试替换现有的 div 而不是追加。 - Berker Yüceer

@Adam，这是我正在开发的整个项目：http://pastebin.com/hzLcrRsL - Aoi

我认为问题出在.load()调用上，它期望一个正确的URL，类似于“add_subject.php”，而你传递的内容看起来不像是一个URL。 - vijay tyagi

Answer 1

首先，检查从浏览器访问add_subject.php是否真的可以访问。如果可以访问，则服务器没有问题。

正如 lifo 所说，您正在错误地使用$ .load。 $ .load将URL作为第一个参数接受。

  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。

- Wern Ancheta

Answer 2

在你的success回调函数中，你使用jQuery.load方法是错误的。 load()期望一个URL而不是选择器。

你可能想要做这样的事情：

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

- lifo