POSTing данные модальной формы с AJAX по php

Question

Я начинающий в мире веб-программирования, и мне нужны некоторые рекомендации, которые помогут мне решить проблему. Я извиняюсь, что мои основы не очень сильны на данный момент.

У меня есть главная страница с именем view.adminsettings.php, на которой я разместил навигационную DIV и контент DIV. У меня есть ссылка в DIV навигации, которая загружает содержимое второй страницы PHP с именем view.pdus_1.php в содержимое DIV view.adminsettings.php. На этом view.pdu_1.php у меня есть всплывающее окно начальной загрузки, содержащее форму, в которую следует отправить, если пользователь хочет создать другой «PDU» в существующем списке. Я хочу, чтобы пользователь мог отправить эту информацию через POST на страницу action.pdu_1.php, которая будет вводить данные формы в базу данных. Мне также хотелось бы, чтобы страница view.pdu_1.php обновлялась на странице содержимого DIV страницы view.adminsettings.php, чтобы пользователь мог сразу просмотреть их вновь созданный элемент.

Мои проблемы, к сожалению, многие. Я хотел бы помочь решить следующие два вопроса:

1) У меня возникли проблемы с получением данных из формы, чтобы правильно отправить сообщение POST на страницу action.pdu_1.php. Сейчас он выполняет как POST (без параметров), так и GET. На какой странице я должен опубликовать этот код? view.adminsettings.php или view.pdu_1.php?

2) У меня также возникли проблемы с обновлением страницы view.pdu_1.php в содержимом DIV. Он не перезагружает страницу view.pdu_1.php обратно в DIV.

Текущий код для загрузки view.pdu_1.php страницы в содержании DIV (РАБОТА):

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

HTML snippnet для DIVs в view.adminsettings.php:

<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> 

Образец форсавтера модальный код формы:

<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 будет очень редко получить ответ на 400 или 500 статус при принятии запроса HTTP. Вы можете заставить это сделать это, но это требует много времени, и вы не можете детализировать информацию, когда она не работает. Это означает, что success() будет запущен, даже если PHP встретит ошибку. Наш 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 или других инструментов отладки.