Question

我在将样本href附加到div或html元素时遇到问题，我对ajax的响应只有3个数组，但是结果显示重复的项目到相应的div。我将与大家分享我已经制作的示例代码

我在这里有我的后端php：

    <?php 
    require_once('../ConnectionString/require_db.php');
    session_start();
    //submit function
    $status = 'Active';
    $posttype_affiliation_page = 'affiliation_page';
    $posttype_member_org_page = 'member_org_page';
    $affiliation_member_org_content = $db->prepare('SELECT title,link,posttype FROM tblcontent 
    WHERE status = ? AND posttype = ? OR posttype = ? ORDER BY contentID DESC') 
    or die($db->error);

    $affiliation_member_org_content->bind_param('sss',$status,$posttype_affiliation_page,$posttype_member_org_page);
    $affiliation_member_org_content->execute();
    $affiliation_member_org_content->bind_result($title,$link,$posttype);
    $result = array();

    while ($affiliation_member_org_content->fetch()) {
        $result[] = array('title'=>$title,'link'=>$link,'posttype'=>$posttype);
       header('Content-type: application/json');

   }

    echo json_encode($result);

?>

我的前端：

    $(document).ready(function(){
        //mission vision
        $.ajax({
        url:'./Function/fetch_affiliation_member_org.php',
        type:'get',
        success:function(response_fetch_affiliation_member_org) {
                console.log(response_fetch_affiliation_member_org);
                var fetch_affiliation_member_org = jQuery.parseJSON(JSON.stringify(response_fetch_affiliation_member_org));
                $.each(fetch_affiliation_member_org,function(i,data){
                        if(data.posttype == 'affiliation_page') {
                                const title = data.title;
                                const link = data.link;
                                var data = "";
                                data = '<p style="font-size:14px;" class="list_affiliation_links"><a href='+link+'>'+title+'</a></p>';
                                $('p.list_affiliation_links').append(data);

                        }
                        else if(data.posttype == 'member_org_page') {
                                const title = data.title;
                                const link = data.link;
                                var data = "";
                                data = '<p style="font-size:14px;" class="list_member_org_links"><a href='+link+'>'+title+'</a></p>';
                                $('p.list_member_org_links').append(data);
                        } 

                });

        },
        error:function(error) {
                console.log(error);
        }
        });
});

我的HTML：

<div class="Affiliation">
                    <h5>Affiliation</h5>

                    <p style="font-size:14px;" class="list_affiliation_links">

                    </p>
                </div>
                <br>
                <div class="Member">
                    <h5>Member Organizations</h5>
                    <p style="font-size:14px;" class="list_member_org_links">

                    </p>
                </div>

Answer 1

 $(document).ready(function(){
        //mission vision
        $.ajax({
        url:'./Function/fetch_affiliation_member_org.php',
        type:'get',
        success:function(response_fetch_affiliation_member_org) {
                console.log(response_fetch_affiliation_member_org);
                var fetch_affiliation_member_org = jQuery.parseJSON(JSON.stringify(response_fetch_affiliation_member_org));
                $.each(fetch_affiliation_member_org,function(i,data){
                        if(data.posttype == 'affiliation_page') {
                                const title = data.title;
                                const link = data.link;
                                var data = "";
                                $('p.list_affiliation_links').html('');
                                data = '<p style="font-size:14px;" class="list_affiliation_links"><a href='+link+'>'+title+'</a></p>';
                                $('p.list_affiliation_links').append(data);

                        }
                        else if(data.posttype == 'member_org_page') {
                                const title = data.title;
                                const link = data.link;
                                var data = "";
                                $('p.list_member_org_links').html('');
                                data = '<p style="font-size:14px;" class="list_member_org_links"><a href='+link+'>'+title+'</a></p>';
                                $('p.list_member_org_links').append(data);
                        } 

                });

        },
        error:function(error) {
                console.log(error);
        }
        });
});

您应该先清除html内容，然后设置为DOM元素。可能对您有用。

Answer 2

您将用HTML附加第二个p标签，该附加标签还将在后面的代码中选择。您只应使用var数据构建链接。

问候

如何使用jQuery修复div中的多个追加

2 个答案: