javascript - Ajax 调用使页面崩溃

Question

我正在尝试使用 ajax 创建一个评论系统。系统对 post_comment.php 进行 ajax 调用，在其中执行 INSERT INTO 并返回我需要的信息。

问题:脚本似乎不工作..它只是卡住了我的页面，如果我等待它会在 8 秒后刷新页面。

<script type="text/javascript">
function post()
{
  var comment = document.getElementById("content").value;
  if(comment)
  {
    $.ajax
    ({
      type: 'post',
      url: 'templates/post_comment.php',
      data: 
      {
         content:content,
         user_id:<?php echo $_SESSION['id']; ?>,
         brand_id:<?php echo $_SESSION['brand_id']; ?>,
         ticket_id:<?php echo $_GET['unique_id']; ?>
      },
      success: function (response) 
      {
          console.log('okay response');
        document.getElementById("all_comments").innerHTML=response+document.getElementById("all_comments").innerHTML;
        document.getElementById("content").value="";
        document.getElementById("username").value="";

      }, error: function() {
          alert("There was an error. Try again please!");
        }
    });
  }

  return false;
}
</script>

我看到的唯一错误(来自谷歌控制台)如下:maximum call stack size exceeded jquery刷新时出现，然后消失

有什么想法吗？提前致谢!

Answer 1

您的问题在这一行:

content:content,

将该行更改为:

content: comment,

请更改该行，因为 content 是一个对象，您不能在另一个对象中添加一个对象。在 chrome last version 中，此对象是输入 content 本身，而在 mozilla 中，它指的是 window 对象。

我从 MDN 报告这个:

content: Deprecated This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

我确定您想引用comment 变量。

function post(e) {
    e.preventDefault();
    var comment = document.getElementById("content").value;
    //
    // the next line in order to show the type of content
    //
    console.log('content is : ' + typeof(content));
    if (comment) {
        $.ajax({
            type: 'GET',
            url: 'https://api.github.com/repositories',
            data: {
                since: '384',
                //
                // changed from content to comment
                //
                content: comment,
                user_id: 'id',
                brand_id: 'brand_id',
                ticket_id: 'unique_id'
            },
            dataType: "json",
            success: function (response) {
                console.log('okay response');
                document.getElementById("all_comments").innerHTML = response + document.getElementById("all_comments").innerHTML;
                document.getElementById("content").value = "";
                document.getElementById("username").value = "";

            },
            error: function () {
                alert("There was an error. Try again please!");
            }
        });
    }
    return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form>
    content: <input type="text" id="content" value="content">
    all_comments: <input type="text" id="all_comments" value="all_comments">
    username: <input type="text" id="username" value="username">
    <input type="submit" value="Submit" id="submit" onclick="post(event);">
</form>