Как реализовать форму без использования элемента формы?

Question

Я пытался реализовать форму без использования элемента формы, но пока безуспешно. У меня есть два файла .php, file1.php и file2.php

Я пытался реализовать это, используя onclick кнопки в file1.php , но я не могу понять, как это работает:

    function submitData(){
    var http = new XMLHttpRequest();
    var url = "file2.php";
    var params = "lorem=ipsum&name=binny";
    http.open("POST", url, true);

    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    http.onreadystatechange = function() {//Call a function when the state changes.
        if(http.readyState == 4 && http.status == 200) {
            alert(http.responseText);
        }
    }
    http.send(params);
}

Функция работает хорошо, при нажатии кнопки она возвращает весь текст file2.php . Но это не то, чего я пытаюсь достичь. Я хочу, чтобы щелкнув по этой кнопке, я получил file2.php , и оттуда я могу получить параметры и использовать их в дальнейшем. Когда я использую элемент формы после нажатия кнопки «Отправить», я получаю file2.php , но приведенный выше код, похоже, не делает этого. Я знаю, что я упускаю что-то очень очевидное здесь: /?

Answer 1

Попробуйте jquery, например:

$(document).ready(function(){
$('#yourBtnId').click(function(){
    //Define all of your form data from input fields, something like:
    var formData = {
      'name' : $('input[name=inputName]').val(),
      //put more here similar to above
    };

    $.ajax({
        type : 'POST', //or get whatever
        url : 'urltophpfilewhereyouprocesspost',
        data : formData,
        dataType : 'json', //or whatever
        encode : true
    })

        .done(function(data){
            //do whatever you want 
        });
    event.preventDefault();
});

});

Answer 2

Я хочу нажать эту кнопку, чтобы перейти на file2.php

Я не знаю, правильно ли я вас понимаю, но вы должны знать, что XMLHttpRequest () используется для AJAX-соединений.

AJAX означает: Асинхронный JavaScript и XML

Асинхронное меню, что вы НЕ будете перенаправлены на этот файл. Вы останетесь в файле file1.php, и в это время сервер запустит file2.php и даст вам ответ. XMLHttpRequest не используется, чтобы показать вам другой файл. Это полезно, когда вы хотите получить ответ из файла PHP, не покидая текущей страницы.