Ajax/Javascript 删除没有对话框的确认文本答案

【问题标题】：Ajax/Javascript Delete Confirm Text Without DialogAjax/Javascript 删除没有对话框的确认文本
【发布时间】：2016-07-16 22:53:48
【问题描述】：

我到处搜索，但似乎在任何地方都找不到我想要实现的任何示例。

我有一个删除按钮，当您按下按钮时，我希望文本出现在屏幕上而不刷新页面，用是/否超链接（不是按钮）询问用户是否要删除他们的消息。我绝对不想使用模式或对话框，我只想在屏幕上显示文本。

我已经在 ajax 页面上尝试了以下脚本，但没有完全按照我的意愿进行操作：

function loadDoc() {
  var xhttp;
  if (window.XMLHttpRequest) {
    // code for modern browsers
    xhttp = new XMLHttpRequest();
  } else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

<p id="demo">Let AJAX change this text.</p>

<button type='submit' name='btn-delete' id='btn-delete' onclick='loadDoc()'>Delete</button>

由于我的按钮设置为提交，在要求用户确认删除之前，我知道它会发布到下一页。

任何帮助将不胜感激。

提前致谢。

【问题讨论】：

您可以尝试删除type='submit'，并通过定位<form> DOM 元素并在其上调用.submit() 在您的javascript 函数末尾提交。
我不明白你为什么需要使用ajax，足以做任何用按钮隐藏的div，当点击按钮'btn-delete'时，显示隐藏的div。
您几乎没有在格式化该代码方面付出任何努力。
只是好奇，你为什么要在你的代码中支持 IE6？

标签： javascript jquery ajax

【解决方案1】：

WORKING JSFIDDLE

您基本上需要首先将您的标记包装在容器 <div> 中，以便在创建时附加您的确认 <a> 标签。

<div id="container">
  <p id="demo">Let AJAX change this text.</p>
</div>

然后创建确认<a>标签并将它们附加到容器<div>。

var node = document.createElement("a");
var textnode = document.createTextNode("Yes");
node.appendChild(textnode);
node.id = 'confirm-delete';
node.href = 'javascript:void(0)';
document.getElementById("container").appendChild(node);

然后当用户点击新创建的<a>标签时触发请求。

document.getElementById('confirm-delete').onclick = function confirmation() {
  // ...
}

【讨论】：