如何在不使用表单元素的情况下实现表单?

时间:2018-05-12 18:34:41

标签: javascript php jquery ajax forms

我一直试图在不使用表单元素的情况下实现表单但尚未成功。我有两个.php文件, file1.php file2.php

我尝试使用 file1.php 中按钮的 onclick 来实现它,但我似乎无法理解它是如何工作的:

    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 ,但上面的代码似乎没有这样做。我知道我错过了一些非常明显的东西:/?

2 个答案:

答案 0 :(得分:0)

  

我想点击这个按钮让我看到file2.php

我不知道我是否能很好地理解你,但你必须知道XMLHttpRequest()用于AJAX连接。

AJAX表示:异步 JavaScript和XML

异步 menas,您将不会被重定向到此文件。你将保留在file1.php文件中,此时服务器将运行file2.php并给你一个答案。 XMLHttpRequest不用于显示另一个文件。当您想要从PHP文件中获得答案而不离开当前页面时,这很有用。

答案 1 :(得分:0)

尝试一些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();
});

});