使用 jquery 脚本时无法在 PHP 中调用 html 标签答案

【问题标题】：Unable to invoke html tags in PHP when using jquery script使用 jquery 脚本时无法在 PHP 中调用 html 标签
【发布时间】：2018-06-22 03:47:14
【问题描述】：

我正在为文件上传进度条使用以下脚本。一切正常，除了我的 php 脚本 test2.php 中的 echo 命令。

文件上传后，我会在 test2.php 中使用粗体标签显示“已上传文件”，打印输出将显示“已上传文件”以及粗体标签，而不是将其设为粗体。

test2.php 没有任何问题，因为如果我直接转到该页面，那么该文本会以粗体打印。

$(function() {
  $('#btn').click(function() {
    $('.myprogress').css('width', '0');
    $('.msg').text('');
    var filename = $('#filename').val();
    var myfile = $('#myfile').val();
    var formData = new FormData();
    formData.append('myfile', $('#myfile')[0].files[0]);
    formData.append('filename', filename);
    $('#btn').attr('disabled', 'disabled');
    $('.msg').text('Uploading in progress...');
    $.ajax({
      url: 'test2.php',
      data: formData,
      processData: false,
      contentType: false,
      type: 'POST',
      // this part is progress bar
      xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
          if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            percentComplete = parseInt(percentComplete * 100);
            $('.myprogress').text(percentComplete + '%');
            $('.myprogress').css('width', percentComplete + '%');
            $('.myProgress').css("background-color", "#0078ae");
          }
        }, false);
        return xhr;
      },
      success: function(data) {
        $('.msg').text(data);
        $('#btn').removeAttr('disabled');
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform1" method="post" enctype="multipart/form-data">
  <div class="form-group">
    <label>Rename Firmware File <i>(optional)</i> </label>
    <input class="form-control" type="text" id="filename" />
  </div>
  <div class="form-group">
    <input type="file" id="myfile" />
  </div>
  <div class="form-group">
    <div class="progress">
      <div class="progress-bar progress-bar-success myprogress" role="progressbar" style="width:0%;">0%</div>
    </div>
    <div class="msg"></div>
  </div>
  <input type="button" id="btn" class="ui-button" value="Upload" />
</form>

【问题讨论】：

你在浏览器的开发者工具中看过AJAX请求吗？
如果您想在邮件中包含 HTML，请使用 html 方法而不是 text ($('.msg').html(data);)
谢谢克里斯，就是这样。

标签： javascript php jquery

【解决方案1】：

在成功处理程序中，您调用 .text 来设置元素上的文本，但这实际上是对 HTML 进行转义。

相反，请尝试.html（请注意您发送的是经过清理的数据！）

success: function(data) {
    $('.msg').html(data);
    $('#btn').removeAttr('disabled');
}

【讨论】：

【解决方案2】：

尝试在 $.ajax() 中添加以下设置对象：

dataType: "html"

根据 jQuery API 文档，dataType 设置指定“...您期望从服务器返回的数据类型”，并将其设置为 html“以纯文本形式返回 HTML；评估包含的脚本标签插入 DOM 时。”

【讨论】：