Question

我的ajax电话

$('#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();
});

此ajax调用不会将data附加到testcontent div。我很好地获得了数据的控制台日志，但它只是不想附加。 div #testcontent始终为空。

我做错了什么。

Answer 1

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

Answer 2

您的功能有效。如果存在问题，则超出了给定的源代码范围。我建议使用setTimeout() Method包装您的重定向，并让用户知道将在X秒内重定向。

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

Ajax调用不附加到div

2 个答案: