时间戳

首页 > 解决方案 > 如何从以前称为 AJAX 的表单中传回数据？

javascript - 如何从以前称为 AJAX 的表单中传回数据？

问题描述

因此，我正在尝试编写一个按钮，该按钮会弹出一个模式，该模式的文本已被 AJAX 从另一个 php 文件中调用。事情是在模态中有一个输入，我需要将输入值传递给原始 URL，以便当用户在模态中单击“确定”时可以将其与其他变量一起提交。

我已经尝试了下面的代码并且所有 AJAX 调用都有效，但是输入变量 (selected_shares) 传递为空。我非常感谢您的帮助。

资产表.PHP

    <?php
    $userLoggedIn = $_SESSION['username'];
    $compe = $_SESSION["comp"];
    $selected_shares = $_GET["selected_shares"];
    ?>

    <table>              
        <tbody>

          <?php

            $assets_query = mysqli_query($con1, "SELECT * FROM assets WHERE username='$userLoggedIn' AND competition='$compe'");
            $assets_query_r = mysqli_fetch_array($assets_query);

                foreach($assets_query as $assets_query_r) {
                                                          ?>

                      <tr>
                      <td><?= $assets_query_r['Item'] ?></td>
                      <td><button id="<?= $assets_query_r['Item'] ?>" data-toggle = "modal" data-target = "#myModal5" onclick="showDetails(this)">
                      </button></td>
                      </tr>

                      <?php
                       } ?>

                      </tbody>
                      </table>


    <!-- Modal -->
    <div class = "modal fade" id = "myModal5" tabindex = "-1" role = "dialog"
   aria-labelledby = "myModalLabel" aria-hidden = "true" data-backdrop="false" style="" >

   <div class = "modal-dialog">
      <div class = "modal-content">

         <div class = "modal-header">
           <h4 class = "modal-title" id = "myModalLabel">
              Sale order
           </h4>


            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" style="background-color: transparent; margin-top: -20px; float: right; color: #4d4646; width: 10px; height: 10px;">
                  &times;
            </button>


         </div>

         <div class = "modal-body">
            <p><span id="value5" style="color:black;"></span></p>
         </div>
         <div class = "modal-footer">
                     <button type = "button" id="modal_yes_btn5" class = "btn btn-primary" style="width: 80px; height: 40px;" onclick="yesBtnFunction5()">
                        Ok
                     </button>

                     <button type = "button" class = "btn btn-default" data-dismiss = "modal" id="modal_no_btn5" style="width: 80px; height: 40px;" onclick="noBtnFunction()">
                        Close
                     </button>


                  </div>

               </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->



</div>
    <!-- /.modal -->

    <script>

    function showDetails(button) {

    window.name = button.id;
    var username = "<?php echo $userLoggedIn; ?>";
    var competition = "<?php echo $compe; ?>";

      $.get('customer.php', {"name": name, "username": username, "competition": competition}, function(data){ $("#value5").html(data); $("#modal_yes_btn5").prop('disabled', false);}, 'html' );

    }

    function yesBtnFunction(){

      var username = "<?php echo $userLoggedIn; ?>";
      var competition = "<?php echo $compe; ?>";
      var selected_shares = "<?php echo $selected_shares; ?>";

      $.ajax({
      url: "data_loader.php",
      method: "GET",
      data: {"username": username, "competition": competition, "selected_shares": selected_shares},
      success:

      function(response){
        $("#value5").text(response);
        $("#modal_yes_btn5").prop('disabled', true);
      }
      });
      }
     </script>

客户.PHP

<?php
  $name = $_GET["name"];
  $username = $_GET["username"];
  $competition = $_GET["competition"];

  echo "Data: " . $name . $username . $competition . " Now type a number:";
    ?>
  <br>
  <input id="numberinput" type="text" style="width:100px; "value="0"> </input>

  <script>

      $('#numberinput').on("input paste keyup", function( event ) {

          selected_shares = $(this).val();
          var selected_shares = selected_shares;

          $.ajax({
          url: "assets_table.php",
          method: "GET",
          data: {"selected_shares": selected_shares},
          success: function(response){
             $('#myModal5').on('shown.bs.modal', showDetails); 
          }
          });

    }

      </script>

标签： javascriptphpjqueryajaxsession

解决方案

我在您的 HTML 中找不到该#value5元素，并且我认为您正在尝试使用 PHP 思维在 JavaScript 中进行编码。

Javascript 在客户端运行，因此您需要考虑浏览器流程。如果你想从另一个页面加载一个模态内容，过程应该是这样的：

<div id="my-modal"> nothing </div>

然后：

<script>
  $.get('somewhere', function(c) {
     //At this point you`re creating new HTML on the browser
     //And after that you can bind events on the new elements created
     $('#my-modal').html(c); 
     $("#my-button-returned-from-ajax").on('click', doSomething);
  }, 'HTML')
</script>

这是您想要做的事情的一个小片段，它不是唯一的，甚至不是更好的方法。

推荐阅读