javascript - 使用 AJAX 将模态表单数据发布到 php

Question

我是网络编程领域的初学者，我需要一些指导来帮助我解决问题。我很抱歉，目前我的基础还不是很强。

我有一个名为 view.adminsettings.php 的主页，我在其中放置了导航 DIV 和内容 DIV。我在导航 DIV 中有一个链接，它将名为 view.pdus_1.php 的第二个 PHP 页面的内容加载到 view.adminsettings.php 的内容 DIV 中。在此 view.pdu_1.php 上，我有一个引导模式弹出窗口，其中包含一个表单，如果用户想要在现有列表中创建另一个“PDU”，则可以在其中提交表单。我希望用户能够通过 POST 将此信息提交到 action.pdu_1.php 页面，该页面将表单数据输入到数据库。我还希望 view.pdu_1.php 页面在 view.adminsettings.php 页面的内容 DIV 页面中刷新，以便用户可以立即查看他们新创建的项目。

不幸的是，我的问题很多。我希望帮助解决以下两个问题:

1) 我无法从表单获取数据以正确 POST 到 action.pdu_1.php 页面。现在它同时执行 POST(不带参数)和 GET。我应该在哪个页面发布此代码？ view.adminsettings.php 还是 view.pdu_1.php？

2) 我在刷新内容 DIV 中的 view.pdu_1.php 页面时也遇到问题。它不会将 view.pdu_1.php 页面重新加载回 DIV。

将 view.pdu_1.php 页面加载到内容 div 中的当前代码(正在运行):

function loadPDUs(){
$(function() {
    $('#DisplayDiv').load('/pdus');
    return false;
});
};

view.adminsettings.php 中 DIV 的 HTML 片段:

<div class="container-fluid">

<div class="row">

    <div id="nav" class="col-md-2"> 

        <h4>Admin Settings</h4>
        <div style="height:20px"></div>
        <p><a href="#" onclick="return loadPDUs();"><i class="fa fa-plug"></i> PDUs </a></p>

    </div>


    <div id="DisplayDiv" class="col-md-10">
        <!-- PDU content here -->
    </div>
</div>

示例 boostrap 模态表单代码:

<div class="modal fade" id="addpdu">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">Add PDU</h4>
        </div>
        <div class="modal-body" id="addpdudiv">
            <form class="form-horizontal">
                <input type="hidden" name="action" id="pduaddaction" value="add">
                <div class="form-group">
                    <label for="pduname" class="col-sm-2 control-label">Name</label>
                    <div>
                        <input type="text" class="form-control" id="pduname" placeholder="PDU Name" name="name">
                    </div>
                    <br>
                    <label for="pduports" class="col-sm-2 control-label">Ports</label>
                    <div>
                        <input type="text" class="form-control" id="pduports" placeholder="Number of ports" name="ports">
                    </div>
                    <br>
                    <p class="text-center">
                        <button id="submitpduadd" class="btn btn-primary">Save</button> &nbsp; <button type="reset" class="btn btn-default">Reset</button>
                    </p>
                </div>
            </form>
        </div>
    </div>
</div>

示例 AJAX

$(function(){
$("button#submitpduadd").click(function(){
    $.ajax({
        type: "POST",
        url: "/actions/action.pdu_1.php",
        data: $('form.form-horizontal').serialize(),
        success: function(){
            console.log("submit successful");
            $("#addpdudiv").modal('hide');
            $('#DisplayDiv').load('/pdus');
        },
        error: function(){
            alert("failure");
        }
    });
});
});

示例 Action.pdu_1.php 代码:

<?php
session_start();

$action = filter_input(INPUT_POST, "action");

if($action === "add") {

$name = filter_input(INPUT_POST, "name");
$ports = filter_input(INPUT_POST, "ports");

$pdu = new pdu();

$pdu->create($name, $ports, $location);

}
?>

Answer 1

我可以提供一些建议。首先进行PDU加载:

<div class="container-fluid">
    <div class="row">
        <div id="nav" class="col-md-2"> 
            <h4>Admin Settings</h4>
            <div style="height:20px"></div>
            <p><a href="/pdus" id="loadPDU"><i class="fa fa-plug"></i> PDUs</a></p>
        </div>
        <div id="DisplayDiv" class="col-md-10">
           <!-- PDU content here -->
        </div>
    </div>
</div>
<script>
$(function(){
    $("#loadPDU").click(function(e){
        e.preventDefault();
        $('#DisplayDiv').load($(this).attr("href"));
    });
});
</script>

只是更便携一点，如果浏览器不支持或不使用 JS/JQuery，它会失败恢复。然后，您还可以创建可以利用相同代码的其他链接或按钮。

您的 AJAX 代码总体来说很好。一些小的改变可以使它更加坚固，并让您知道它是否在某个地方工作或失效。

$(function(){
    $("button#submitpduadd").click(function(){
        $.ajax({
            type: "POST",
            url: "/actions/action.pdu_1.php",
            data: $('form.form-horizontal').serialize(),
            type: 'JSON',
            success: function(retData){
                if(retData.error.length){
                    console.log(retData.error);
                } else {
                    console.log(retData);
                }
                $("#addpdudiv").modal('hide');
                $('#DisplayDiv').load('/pdus');
            },
            error: function(){
                alert("HTTP failure. Try Again.");
            }
        });
    });
});

PHP 错误的本质几乎总是返回 200 状态，因此 AJAX 在发出 HTTP 请求时很少会获得 400 或 500 状态响应。您可以强制它这样做，但这非常耗时，而且您无法在失败时返回详细信息。这意味着即使 PHP 遇到错误，success() 也会被命中。我们的 PHP 需要能够告诉 JS/JQuery 遇到了错误。

<?php
session_start();

$action = filter_input(INPUT_POST, "action");
if($action === "add") {
    $name = filter_input(INPUT_POST, "name");
    $ports = filter_input(INPUT_POST, "ports");
    $location = (isset($_POST['location'])?filter_input(INPUT_POST, "location"):"");
    $params = array("name" => $name, "ports" => $ports, "loc" => $location);
    try {
        $pdu = new pdu();
        $pdu->create($name, $ports, $location);
    } catch (Exception $e) {
        $error = array('error' => 'Caught exception: ' .  $e->getMessage());
    }
    echo (isset($error))?json_encode($error):json_encode($params));
}
?>

所以现在 PHP 会返回一些东西，即使他们失败了。我们可以检查这些数据，无论成功还是失败，并找出发生了什么。即使 PHP 之前出现错误，生成的 HTML 也应该可以使用 FireBug 或其他调试工具查看。