Question

我正在学习HTML JS CSS和PHP，我遇到了一个大问题。

$input中的getPosForLieferschein()变量应该是用户输入，但是我找不到将JS变量转换为PHP的方法。用户应在输入字段中写入合同编号，合同位置 - getPosForLieferschein（） - 显示在下表中。页面应该不重新加载，以防万一其他方式无效。我知道代码太可怕了！

目：

<?php include 'connection_manager.php'; $tags = getLieferscheine();?>
<script type="text/javascript">

var availableTags = "<?php echo $tags;?>"

$(function () {
    var values = availableTags.split(",");
    $('.select').autocomplete({
        source: values
    });
});

function generate() {
    var eingabe = document.getElementById('input').value;
    var position = "<?php $positionen = getPosForLieferschein($input); echo $positionen; ?>";
    var arr = position.split(','), contract = arr[0], pos = arr[1], article = arr[2], name = arr[3], amount = arr[4], unit = arr[5];
    var table = document.getElementById("table1body");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(2);
    var cell5 = row.insertCell(2);
    var cell6 = row.insertCell(2);
    var i = 60;
    var a = document.getElementById("input");
    if ((a.value == eingabe)) {
        while (i > 0) {
            cell1.innerHTML = contract;
            cell2.innerHTML = pos;
            cell3.innerHTML = unit;
            cell4.innerHTML = amount;
            cell5.innerHTML = name;
            cell6.innerHTML = article;
            i = i - 60;
        }
    }
    else {
        swal({
            title: "Fehler!",
            text: "Bitte geben Sie eine gültige Auftragsnummer ein!",
            type: "error",
            confirmButtonText: "Ok",
            confirmButtonColor: "#FF0000"
        });
    }
};

$(document).ready(function () {
    $("#details").click(function () {
        $("#uebertragen").removeAttr("disabled");
        $("#details").attr("disabled", "disabled");
    })
    $("#uebertragen").click(function () {
        $("#details").removeAttr("disabled");
        $("#uebertragen").attr("disabled", "disabled");
    })
})

$(document).ready(function () {
    $("#uebertragen").click(function () {
        $("td").remove()
    })
})
</script>

体：

<body>
<center>
<img style="position:relative;left:25px;" src="quehenberger.jpg" height="50px" width="240px" alt="quehenberger logo" align="left"/>
<img style="position:relative;right:25px;" src="bilton.png" height="50px" width="300px" alt="bilton logo" align="right"/>
<h1><b>QLog Eingabe</b></h1>
<hr/>

<div class="container">
    <div class="row">
           <form action="" method="get">
            <input id="input" type="text" style="width:50%;position:relative;left:14em;" value="" class="select form-control col-xs-1" Placeholder="Auftragsnummer"/>
            <button style="position:relative;left:18em;" id="details" class="col-xs-1 btn btn-success" onclick="generate();">Pr&uuml;fen</button>
           </form>
    </div>
    </p>
    <button style="width:100px;position:relative;left:58.65em;" id="uebertragen" disabled="disabled" class="col-xs-1 btn btn-danger">&Uuml;bertragen</button>
</div>
<table class="table">
        <thead>
          <tr>
            <th>Auftragsnummer</th>
            <th>Positions Nummer</th>
            <th>Artikel Nummer</th>
            <th>Artikel Bezeichnung</th>
            <th>Artikel Menge</th>
            <th>Einheit</th>
          </tr>
        </thead>
        <tbody id="table1body">
        </tbody>
</table>
</center>
</body>
</html>

Answer 1

您不能只转换变量。 不可能。还有其他选项可以在不重新加载的情况下对页面进行更改：

每次用户输入字段的内容发生变化时，您都可以发出ajax请求。在控制器（服务器端）进行所有需要进行的计算，然后返回结果并将其显示在同一页面中。
如果您使用Yii2框架，则会有另一种选择。但这需要您对函数的结构进行一些更改。在Yii2中，您可以在视图文件中编写JS并使用PHP varibles的值。有关该功能的一些信息here。

据我了解，您没有使用任何框架，因此我建议使用ajax请求并将计算出的值传递回页面（选项1）。

Answer 2

这是最终的代码！谢谢你的帮助！：D`

<script type="text/javascript">

    var availableTags = "<?php echo $tags;?>"
    var currentTag = false;

    $(function(){
        var values = availableTags.split(",");
        $('.select').autocomplete({
            source: values,
            select: function( event, ui ) {
                //$('#input').val()
                //console.log(ui.item.value);
                getAuftrag(ui.item.value);
            }
        });
    });

    function sendAuftrag() {
        if (currentTag !== false) {
            $.ajax({
            method: "GET",
            url: "save.php",
            data: {
                q : currentTag
                },
            dataType: "html",
            success: function(data) {
                $("#tableBody").html("");
                $("#uebertragen").attr("disabled", "disabled");

                swal({title: "Erfolg!",
                    text: "Auftragsnummer " + currentTag + " erfolgreich übermittelt!",
                    type: "success",
                    confirmButtonText: "Ok",
                    confirmButtonColor: "#FF0000"
                    });

                currentTag = false;
                }
            });
        }
    }

    function getAuftrag(str) {
        if (str == "") {
            document.getElementById("tableBody").innerHTML = "";
            currentTag = false;
            return;
        }

        var values = availableTags.split(",");

        if (values.indexOf(str) === -1) {
            currentTag = false;
            swal({title: "Fehler!",
                text: "Bitte geben Sie eine gültige Auftragsnummer ein!",
                type: "error",
                confirmButtonText: "Ok",
                confirmButtonColor: "#FF0000"
            });
        } else {
            $.ajax({
                method: "GET",
                url: "ajax.php",
                data: {
                    q : str
                    },
                dataType: "html",
                beforeSend: function(jqxhr) {
                    currentTag = str;
                    },
                success: function(data) {
                    $("#tableBody").html(data);

                    $("#uebertragen").removeAttr("disabled");
                    // console.log(data);
                    }
            });
        }
    }



    $(document).ready(function(){
        $("#uebertragen").click(function(){
            $("#uebertragen").attr("disabled", "disabled");
        })
})
</script>`

HTML：

`<body>
<center>
<img style="position:relative;left:25px;" src="quehenberger.jpg" height="50px" width="240px" alt="quehenberger logo" align="left"/>
<img style="position:relative;right:25px;" src="bilton.png" height="50px" width="300px" alt="bilton logo" align="right"/>
<h1><b>QLog Eingabe</b></h1>
<hr/>

<div class="container">
    <div class="row">
            <input id="input" style="width:50%;position:relative;left:14em;" class="select form-control col-xs-1" Placeholder="Auftragsnummer"/>

            <!-- <button style="position:relative;left:18em;" id="details" class="col-xs-1 btn btn-success" >Pr&uuml;fen</button> -->
            <button style="width:100px;position:relative;left:18em;" id="uebertragen" disabled="disabled" class="col-xs-1 btn btn-danger">&Uuml;bertragen</button>
    </div>
</div>

<div id="tableBody"><b></b></div>

<div style="background-color: #E6E6E6;height:40px;width:100%;" data-role="footer" data-tap-toggle="false" class="ics-footer">
    <p>Copyright IcoSense GmbH. All rights reserved.</p>
</div>
</center>
</body>
</html>`

将JavaScript变量转换为PHP变量

2 个答案: