php 在 AJAX 数据中添加换行符

4urapxun  于 2023-02-21  发布在  PHP
关注(0)|答案(1)|浏览(151)

我使用ajax从高级自定义字段所见即所得编辑器中传递一些数据。在我添加的标记中,我指的是类为'bio'的div。问题是当我取回数据时,它们都在一个大段落中。而不是像在所见即所得中那样分解成多个。我猜这是因为它发送的是json而不是标记???当我记录在控制台中传递的数据时,我可以看到它被分成了多个段落。有没有办法可以在单独的p标记中呈现它,或者有没有办法JS可以检测到段落的结尾,然后我可以附加一个
还是什么的
这是我的php文件

<div id="<?php echo $post->ID; ?>" class="team-section__member" data-ajax-url="<?php echo admin_url("admin-ajax.php"); ?>">
    <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
    <div class="info">
        <?php
        $s = get_the_title();
        $name = explode(' ', trim($s));
        ?>
        <h4 class="name"><?php echo get_the_title(); ?></h4>
        <h6 class="title"><?php echo get_field('team_member_title'); ?></h6>
        <a class="phone" href="tel:<?php echo get_field('team_member_phone_number'); ?>"><?php echo get_field('team_member_phone_number'); ?></a>
        <a class="email" data-email="<?php echo get_field('team_member_email'); ?>" href="mailto:<?php echo get_field('team_member_email'); ?>">Email <?php echo $name[0] . "\n"; ?></a>
        <div class="bio"><?php echo get_field('team_member_bio'); ?></div>
    </div>
</div>
// Member Bio modal w/ajax
        $(".team-section__member .button").click(function () {
            let member = $(this).parent().parent();
            let memberId = member.attr('id');
            let ajaxUrl = member.data('ajaxUrl');
            let name = member.children('.info').find('.name').text();
            let image = member.children('img').attr('src');
            let title = member.children('.info').find('.title').text();
            let email = member.children('.info').find('.email').data('email');
            let phone = member.children('.info').find('.phone').text();
            let bio = member.children('.info').find('.bio').text();
            $("body").toggleClass("scroll-lock");
            console.log(bio);
            $.ajax({
                type: "POST",
                url: ajaxUrl,
                dataType: 'json',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                },
                data: {
                    action: 'post_member_id',
                    id: memberId,
                    image: image,
                    name: name,
                    title: title,
                    email: email,
                    phone: phone,
                    bio: bio,
                },
                success:
                    function (data) {
                        $(".team-modal__content").empty();
                        $(".team-modal__content").append(

                            "<div class='team-modal__container'>" +
                            "<button class='modal-button'><span></span><span></span></button>" +

                            "<div class='team-modal__image-wrapper'>" +
                            "<img class='team-modal__image' src=" + image + ">" +
                            "</div>" +

                            "<div class='team-modal__info-wrapper'>" +
                            "<h3 class='team-modal__name'>" + name + "</h3>" +
                            "<h5 class='team-modal__title'>" + title + "</h1>" +
                            "<a class='team-modal__email' href=mailto:" + email + ">" + email + "</a>" +
                            "<a class='team-modal__phone' href=tel:" + phone + ">" + phone + "</a>" +
                            "<div class='team-modal__bio'>" +
                            bio +
                            "</div>" +

                            "</div>" +
                            "</div>"
                        );
                    },
                error: function (error) { console.log(error) },
            });

7d7tgy0s

7d7tgy0s1#

显示<pre>元素中的内容或在容器上设置CSS属性white-space: pre-wrap,以便正常显示空白。

.team-modal__bio {
    white-space: pre-wrap;
}

相关问题