Ajax调用使页面崩溃

Question

I am trying to create a comment system with ajax. The system makes an ajax call to post_comment.php where it does a INSERT INTO and returns the info I need.

Problem: the script seems not to work.. it just freezes my page, and if I wait it refreshes the page after 8 seconds.

<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>

the only error (from google console) i see is the following: maximum call stack size exceeded jquery it appears during the refresh, and then it disappears

Any ideas? Thanks in advance!

Answer 1

Your issue is in this line:

content:content,

Change that line to:

content: comment,

Please, change that line because content is an object and you cannot add an object inside another object. In chrome last version this object is the input content itself while in mozilla it refers to the window object.

I report this from 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.

I'm sure you want to refer to comment variable.

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>

</div>