HTML5 在 PHP 页面中创建一个传递 JSON OBJ 的 post 请求并加载新的 php 页面

问题描述

我正在玩 HTML5、Javascript、JSON 和 PHP，我是初学者

我正在创建一个网页，其中包含从 MysqL 中读取的 PHP 文章列表，我想单击文章并打开一个新的 PHP 页面

我自己成功做到了，我从互联网上复制过来，我也成功地创建了一个 JSON 对象并将它传递给 XMLHttpRequest 到一个 PHP 页面，我不明白为什么它打不开网页

这里是 list.PHP 中的一段代码，我在其中创建了一个 JSON 对象，该对象从从 MysqL 用 PHP 创建的表中通过鼠标单击的选定行收集数据：

var xhr = new XMLHttpRequest();

xhr.open("POST","article.PHP");

xhr.onreadystatechange = function() { 

   if (xhr.readyState === 4 && xhr.status === 200) { 

       console.log(xhr.responseText); // it wrotes the article.PHP page in console

    } 

   }

xhr.setRequestHeader("Content-type","application/json");

xhr.send(JSON.stringify(jsonObj));

这里是 article.PHP 中的代码

$data = json_decode(file_get_contents('PHP://input'),true);

我在 Chrome 控制台中看到了工作 article.PHP 的结果！没有加载网页！

解决方法

如果您的要求非常简单，您可以使用：

var xhr = new XMLHttpRequest()
xhr.open("POST","article.php")
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        document.documentElement.outerHTML = xhr.responseText
    }
}

但是请注意，这是一个非常有限的黑客攻击。出现问题的方式有很多种。

更好的方法可能是使用 JSON 文本定义表单和字段，然后提交，而不是使用 XHR。

我对xmlhttprequest有很多误解，它是用来检索信息的

我创建了一个隐藏的表单，在点击处理程序时我设置了每个输入类型的值，然后是一个 document.getElementById("form").submit();

这部分代码：

<form id="formInvio" action="dettaglio.php" method="post">
    <input type="hidden" name="key" id="idkey" value="0">
    <input type="hidden" name="partNumber" id="idpartNumber" value="0">
    <input type="hidden" name="descrizione" id="iddescrizione" value="0">
    <input type="hidden" name="prezzo" id="idprezzo" value="0">
    <input type="hidden" name="quantita" id="idquantita" value="0">
    <input type="hidden" name="ubicazione" id="idubicazione" value="0">
    <input type="hidden" name="note" id="idnote" value="0">
    <input type="submit" id="idsubmit">
</form>

这是我设置值并生成点击的地方：

  function addRowHandlers() {
        var table = document.getElementById("articoli");
        var rows = table.getElementsByTagName("tr");
        for (i = 0; i < rows.length; i++) {
            var currentRow = table.rows[i]; //servirà sotto alla fine
            var createClickHandler =
                function (row) {
                    return function () {
                        var cells = row.getElementsByTagName("td");
                        // ciclo su tutti i td della cella
                        var accrocchio = 0;

                        for (let cell of cells) {
                            var id = cell.innerHTML;
                            //alert(id.innerText);
                            switch (accrocchio) {
                                case 0:
                                    document.getElementById("idkey").value = id;
                                    break;
                                case 1:
                                    document.getElementById("idpartNumber").value = id;
                                    break;
                                case 2:
                                    document.getElementById("iddescrizione").value = id;
                                    break;
                                case 3:
                                    document.getElementById("idprezzo").value = id;
                                    break;
                                case 4:
                                    document.getElementById("idquantita").value = id;
                                    break;
                                case 5 :
                                    document.getElementById("idubicazione").value = id;
                                    break;
                                case 6:
                                    document.getElementById("idnote").value = id;
                                    break;
                            }
                            accrocchio++;
                        }
                        document.getElementById("formInvio").submit();

                    };
                };

            currentRow.onclick = createClickHandler(currentRow);
        }
    }

在主 php 页面中，我将此代码放入隐藏的提交按钮并在表上添加处理程序 onlick funzion :

    <style style="text/css">
        #articoli {
            width: 100%;
            border-collapse: collapse;
        }

        #articoli td {
            padding: 7px;
            border: #4e95f4 1px solid;
        }

        /* Define the default color for all the table rows */
        #articoli tr {
            background: #b8d1f3;
        }

        /* Define the hover highlight color for the table row */
        #articoli tr:hover {
            background-color: #ffff99;
        }

        #idsubmit {
            visibility: hidden;
        }

    </style>

window.onload = addRowHandlers();

我希望它可以帮助那些想要在 php 中创建文章列表并单击该行打开详细页面的人...

javascript json xmlhttprequest xmlhttprequest