Создание кнопки JavaScript AJAX с onClick и без jQuery

Question

Я просмотрел много похожих вопросов по этому поводу и не получил ничего, несмотря на то, что «разумно имитировал» множество различных реализаций, поэтому я решил, что я пойду вперед и укушу пулюи спросите здесь, прежде чем я потрачу впустую больше времени.

Страница предназначена для гибридного дизайна, с функциональностью 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, но вместо этого она просто обновляет страницу.

Answer 1

button.onclick = process;

- это то, что вам нужно.process() - это просто обычный вызов функции, который происходит тут же, тогда onclick сохранит его результат.

Однако вы также упоминаете, что он обновляет страницу: добавляете ли вы эту кнопку в форму?Потому что в этом случае поведение кнопок по умолчанию заключается в отправке формы независимо от наличия обработчика событий.См https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type, и добавьте

button.type="button";