Ajax call not appending to div

Question

My ajax call

$('#searchform').submit(function(event) {
  $.ajax({
  type: "get",
  url: "/list",
  dataType: "text",
  data: $("#searchform").serialize(),   
   beforeSend: function() {
              $(".se-pre-con").show();
           },
  success: function(data)
  {
    console.log(data);
    $("#testcontent").append(data);
    location.href="/test?"+$("#searchform").serialize();
  }

});
  event.preventDefault();
});

This ajax call does not append the data to the testcontent div. I get the console log for data very well, but it just does not want to append. The div #testcontent is always empty.

What am I doing wrong.

Answer 1

实际上，您是将数据追加到#testcontent ，但是这里存在一个错误-您通过调用location.href="/test?"+...成功刷新页面，浏览器再次呈现默认视图。

Answer 2

Your functionality works. If there is an issue, it's outside the scope of the source code that was given. I would suggest wrapping your redirect with a setTimeout() Method and letting the user know the will be redirect in X amount of seconds.

 /* Variable Defaults */ var dummyURL = 'https://jsonplaceholder.typicode.com/posts/1'; /* Bind Submit Event to Form */ $('#searchform').on('submit', function(event) { $.ajax({ type: 'get', url: dummyURL, dataType: 'text', data: $('#searchform').serialize(), beforeSend: function() { $('.se-pre-con').show(); }, success: function(data) { $('#testcontent').append(data); console.log('Redirected To:', '/test?' + $('#searchform').serialize()); } }); event.preventDefault(); }); 

 .se-pre-con { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="searchform"> <label>First Name:</label> <input type="text" name="first_name"> <br> <label>Last Name:</label> <input type="text" name="first_name"> <br> <button type="submit">Submit</button> </form> <p class="se-pre-con"> Show Me Before Send! </p> <p id="testcontent"></p>