显示成功消息

Question

我想以与用户输入信息相同的方式显示成功消息，但没有得到我想要的结果

$.ajax({
  url: form.attr('action'),
  type: form.attr('method'),
  data: formData,
  dataType: 'json',
  cache: false,
  contentType: false,
  processData: false,
  success: function(html) {
    $("#createTakeoutBtn").button('reset');
    $("#TakeoutForm")[0].reset();
    $("html, body, div.modal, div.modal-content, div.modal-body").animate({
      scrollTop: '0'
    }, 100);

    $('#add-takeout-messages').html('<div class="alert alert-success">' +
      '<button type="button" class="close" data-dismiss="alert">&times;</button>' +
      '<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> ' + 'Successfuly Saved' +
      '</div>');

    // remove the mesages
    $(".alert-success").delay(500).show(10, function() {
      $(this).delay(3000).hide(10, function() {
        $(this).remove();
      });
    });
  }
});

<div id="add-takeout-messages"></div>

这就是现在的结果

{
  "success": true,
  "messages": "Successfully Added"
}

Answer 1

试试这个，您忘记连接html.messages

$('#add-takeout-messages').html('<div class="alert alert-success">' +
      '<button type="button" class="close" data-dismiss="alert">&times;</button>' +
      '<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> ' + html.messages +
      '</div>');

请在成功方法中使用html data / response inadead以防止混淆，即

success: function(response) {
      $('#add-takeout-messages').html('<div class="alert alert-success">' +
      '<button type="button" class="close" data-dismiss="alert">&times;</button>' +
      '<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> ' + response.messages +
      '</div>');
}

Answer 2

该问题隐藏在注释中：

我想要的结果是在模式标题下显示成功消息，但是它显示了带有响应消息的页面

您正在尝试使用表单提交按钮触发此Ajax请求，但忘记了阻止表单的默认操作-因此，将使用脚本结果刷新整个页面，而不是Ajax请求。

为防止这种情况，您可以使用event.preventDefault或从表单Submit事件 return false ：

// "form" variable defined earlier, as shown in your existing code
form.bind('submit', function (e) {
   e.preventDefault();
   $.ajax({ .... })
}

...或使用“提交”以外的按钮触发AJAX请求。

Answer 3

我创建了两个文件，一个index.php文件，另一个创建了一个request.php文件，我不知道您使用的是php还是json或其他后端语言，重要的部分是从ajax和ajax获取的json的结构本身，我还通过单击事件在某些自定义按钮上运行ajax调用，您可以在任意位置将其触发ajax调用，这是相同的，代码如下：

的php：

$array = [
  "status"=>"success",
  "messages"=>  [
    array('date' => "2019-04-11", 'msg'=>'Love you', 'from'=>'Annie' ),
    array('date' => "2019-04-10", 'msg'=>'Have a nice day', 'from'=>'Annie' )
  ]

];
echo json_encode($array);

或json：

{"status":"success","messages":[{"date":"2019-04-11","msg":"Love you","from":"Annie"},{"date":"2019-04-10","msg":"Have a nice day","from":"Annie"}]}

javascript：

$(document).ready(function() {
  var formData = {id:"1",name:"stan",lastname:"chacon",color:"blue"};
  function _ajaxMessage(formData){
    return $.ajax({
      url: "request.php",
      type: 'POST',
      data: formData,
      dataType: 'json'
    })
  }

  $("#btnDisplayModal").on('click', function(){
    _ajaxMessage(formData)
    .done(function(response){
      $('#add-takeout-messages').empty();
      $.each(response.messages,function(index,value){
        console.log(index,value);
      $('#add-takeout-messages').append('<div class="alert alert-success">' +
    '<button type="button" class="close" data-dismiss="alert">&times;</button>' +
    '<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> From: '+ value.from + '<br>' +  ' msg: ' + value.msg +
    '</div>')
      })
      $("#myModal").modal();
    })
  })

})

注意我使用boostrap 4。

它显示：

希望对您有帮助=）