Javascript 显示一条成功消息

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

$.ajax({
url:form.attr（'action'），
类型：form.attr（'method'），
数据：formData，
数据类型：“json”，
cache:false，
contentType:false，
processData:false，
成功：函数（html）{
$（“#createTakeoutBtn”）。按钮（“重置”）；
$（“#TakeoutForm”）[0]。重置（）；
$（“html，body，div.modal，div.modal-content，div.modal-body”）。动画({
scrollTop:“0”
}, 100);
$（'#添加外卖消息'）.html（''+
“×；”+
“”+“已成功保存”+
'');
//拆下台面
$（“.alert success”）.delay（500）.show（10，函数（）{
$（this）.delay（3000）.hide（10，function（）{
$（this.remove（）；
});
});
}
});

这就是我现在得到的结果

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

---

试试这个，你忘了连接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.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>');

---

我创建了两个文件，一个是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();
    })
  })

})

$（文档）.ready（函数（）{
var formData={id:“1”，name:“stan”，lastname:“chacon”，color:“blue”}；
函数_ajaxMessage（formData）{
返回$.ajax({
url:“request.php”，
键入：“POST”，
数据：formData，
数据类型：“json”
})
}
$（“#btndisplaymodel”）。在（'click'，function（）上{
_ajaxMessage（formData）
.完成（功能（响应）{
$（“#添加外卖消息”）.empty（）；
$.each（响应、消息、函数（索引、值）{
console.log（索引、值）；
$（'#添加外卖消息'）。附加（''+
“×；”+
“From:”+value.From+”
“+”msg:“+value.msg+
'')
})
$（“#myModal”）.modal（）；
})
})
})

注：我使用boostrap 4

它显示：

---

希望有帮助=）

我创建了两个文件，一个是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();
    })
  })

})

$（文档）.ready（函数（）{
var formData={id:“1”，name:“stan”，lastname:“chacon”，color:“blue”}；
函数_ajaxMessage（formData）{
返回$.ajax({
url:“request.php”，
键入：“POST”，
数据：formData，
数据类型：“json”
})
}
$（“#btndisplaymodel”）。在（'click'，function（）上{
_ajaxMessage（formData）
.完成（功能（响应）{
$（“#添加外卖消息”）.empty（）；
$.each（响应、消息、函数（索引、值）{
console.log（索引、值）；
$（'#添加外卖消息'）。附加（''+
“×；”+
“From:”+value.From+”
“+”msg:“+value.msg+
'')
})
$（“#myModal”）.modal（）；
})
})
})

注：我使用boostrap 4

它显示：

---

希望有帮助=）

问题隐藏在评论中：

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

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

要防止出现这种情况，可以从以下位置使用

event.preventDefault

或

return false

：

---

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

问题隐藏在注释中：

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

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

要防止出现这种情况，可以从以下位置使用

event.preventDefault

或

return false

：

---

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

尝试使用成功方法发出警报（html.mesges）。您的意思是，您正在获取对象，并且只想显示

消息

值？尝试在add-takeout-messages中添加“我没有得到我想要的结果”并不是帮助您解决此问题的真正有用的信息。你得到了什么结果？你到底想要什么样的结果？@Vishwa我试过了，它给我的结果与成功方法中的alert（html.mesges）相同你的意思是，您正在获取对象，并且只想显示

消息

值？请尝试附加到add-takeout-messages“我没有得到我想要的结果”并不是帮助您解决此问题的真正有用的信息。你得到了什么结果？你到底想要什么样的结果？@Vishwa我试过了，它给了我同样的结果，仍然是一样的，仍然是一样的