创建一个 AJAX JavaScript 按钮 w/onClick 没有 jQuery答案

【问题标题】：Creating an AJAX JavaScript Button w/ onClick and no jQuery创建一个 AJAX JavaScript 按钮 w/onClick 没有 jQuery
【发布时间】：2018-11-20 02:06:57
【问题描述】：

尽管“明智地模仿”了许多不同的实现，但我已经查看了很多类似的问题，但没有让它做任何事情，所以我想我会继续硬着头皮在我浪费时间之前在这里问。

该页面是一种混合设计，具有 AJAX 和非 JS 功能，可以将表单发送到 PHP 文件。常规的非 AJAX 版本可以正常工作。启用 JS 后，它使用<script> 拉取一个脚本文件，内容如下：

window.onload = newButton();

function newButton(){
    var button = document.createElement('button');
    button.innerHTML = 'jButton';
    button.onclick = process();
    document.getElementById('sro').appendChild(button);
    // sro being the id of the form.
  };

function process() {
// php form handling stuff
}

该按钮应该将数据发送到 PHP 文件，但它只是刷新页面。

【问题讨论】：

你知道如何进行 AJAX 调用吗？
好吧，我之前已经设法破解了一对夫妇，只是没有使用 JS 创建的按钮。我实际上已经制作了另一个版本的页面，它没有添加按钮，而是从一个设置开始调用过程，并且那个工作正常。也许我应该坚持下去，我不知道......不过，在这么长时间没有让它工作之后，它变成了一个原则问题！

标签： javascript forms function button

【解决方案1】：

button.onclick = process;

是你需要的。 process() 只是一个普通的函数调用，并且发生在那里，然后onclick 将存储它的结果。

但是您还提到它刷新页面：您是否将此按钮添加到表单中？因为在这种情况下，按钮的默认行为是提交表单，而不管是否有事件处理程序。见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type，并添加

button.type="button";

【讨论】：

我只用进程尝试过；之前，但是 button.type="button";改变了一切。非常感谢！