Ajax-Request:将动态内容传递给模态

Ajax-Request: Passing Dynamic Content to modal

本文关键字：模态 动态 Ajax-Request      更新时间：2023-09-26

我以前从未使用过jquery，并努力为我的情况找到解决方案。

在驾驶舱.php页面上，我使用表单从 mysql 数据库中获取一些内容。同时，我可以在驾驶舱页面上的div 中显示此内容.php。

计划是在模态中显示内容。在那里，用户有 10 秒的时间来确认它（在这种情况下，它应该存储到数据库中）。

问题：我尝试了几个小时和几天才能将内容放入模态中。没机会...关于如何解决这个问题的任何想法？顺便说一句：在倒计时达到零后，我重新加载窗口。在这里，通过jquery接近模态也是一个想法。

所以我真的很感激一些提示。谢谢。

最终解决方案：莫代尔.js

$(function(){
  $("#pricing").submit(function() {
      $.ajax({
             type: "POST",
             url: $(this).attr('action'),
             data: $(this).serialize(),
             dataType: 'json',
             success: function(data)
             {                 
             $('#myModal').find('#a').text(data.a);
             $('#myModal').find('#b').text(data.b);     
             $('#myModal').find('#c').text(data.c);
             $('#myModal').find('#d').text(data.d);
             $('#myModal').find('#e').text(data.e);
             $('#myModal').find('#f').text(data.f);
             $('#a2').val($(this).data('a'));
             $('#myModal').modal('show');
             }
           });
      return false;  
  });
});

   $("#confirm").click(function(){
    var data = {
    a: $('#a').text(),
    b: $('#b').text(),
    c: $('#c').text()
};    
    $.ajax({
        url: 'confirm.php',
        type: "POST",
        data: data,
        dataType: 'json',
        success: function(confirm)  {                 
             window.location.reload();
             }
    });
});

点击功能模式的相关 HTML 部分：

 <div class="alert hidden" role="alert" id="modalAlert"></div>
                <input type="hidden" id="confirmmodal" name="confirmmodal" value="" /> 
                    </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-ar btn-default" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-ar btn-primary" id="confirm">Confirm</button>
          </div>

确认.php

<?php
    $a = $_POST['a'];
    // do what you want
    $confirm = array('message' => $a);
    echo json_encode($confirm);

所以功能工作正常...

我为你做了一个完整的例子，我在我的网站上使用它。这是一个带有链接和模态的html文件，所需的JQuery和简单的php代码来模拟服务器响应。它向您展示了如何将数据传递到模态，如何显示模态并显示服务器响应。

只需将文件复制到同一目录中并对其进行测试，它对我有用。

索引.html

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="/script.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
          <div class="modal-dialog ">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalTitle"></h4>
              </div>
              <div class="modal-body">
                <div class="alert hidden" role="alert" id="modalAlert"></div>
                <input type="hidden" id="myModalID" name="myModalID" value="" />
                <p>Modal example.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" id="myModalButton">Submit</button>
              </div>
            </div>
          </div>
        </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <a class="openModalLink" href="/" data-id="1234" data-name="Stackoverflow answer">
                  <span> Click me to open modal</span>
                </a>
            </div>          
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    </body>
</html>

脚本.js

$(function(){
  $(".openModalLink").click(function(e) {
      e.preventDefault();       
      $("#myModalTitle").html('Hello, my name is '+$(this).data('name')+'!');
      $("#myModalID").val($(this).data('id'));
      $('#myModal').modal('show');
  });
  $("#myModalButton").click(function(){
      $.ajax({
             url: '/function.php',
             data: {
               id: $("#myModalID").val()
             },
             dataType: 'json',
             success: function(data)
             {                 
              $('#myModal').find('#modalAlert').addClass('alert-success');
              $('#myModal').find('#modalAlert').html(data.message).show; 
              $('#myModal').find('#modalAlert').removeClass('hidden');
             }
       });    
  });
});

功能.php

<?php
    echo json_encode(array('message' => 'You submitted this id: ' . $_GET['id']));

希望这有帮助，请随时问我

根据您的评论进行更新

我创建了另一个版本，它将从 html 页面上的表单中获取数据，将其传递给 php，然后在模态窗口上显示来自 php 的结果。它使用不同的javascript，因为现在我们正在将表单数据"发布"到php。以下是文件：

索引.html

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="/script.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
          <div class="modal-dialog ">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalTitle"></h4>
              </div>
              <div class="modal-body">
                <div class="alert hidden" role="alert" id="modalAlert"></div>
                <input type="hidden" id="myModalID" name="myModalID" value="" />
                <p>Modal example.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" id="myModalButton">Submit</button>
              </div>
            </div>
          </div>
        </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="row">
              <div class="col-md-8 col-md-offset-0">
               <form class="form-inline" id="myForm" action="/function.php" method="post">
                 <div class="form-group">
                   <label for="myInput">Input data</label>
                   <input type="text" class="form-control" id="myInput" name="myInput" placeholder="Enter data here">
                 </div>
                 <button type="submit" class="btn btn-primary">Save</button>
               </form>
              </div>
            </div>          
            </div>          
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    </body>
</html>

脚本.js

$(function(){
  $("#myForm").submit(function(event) {
      $.ajax({
             type: "POST",
             url: $(this).attr('action'),
             data: $(this).serialize(),
             dataType: 'json',
             success: function(data)
             {                 
                //display data...
                $('#myModal').find('#modalAlert').addClass('alert-success');
                $('#myModal').find('#modalAlert').html(data.message).show; 
                $('#myModal').find('#modalAlert').removeClass('hidden');
                $('#myModal').modal('show');
             }
           });
      return false;  
  });
});

功能.php

<?php
echo json_encode(array('message' => 'You submitted this data: ' . $_POST['myInput']));
相关文章：