个人中心
gpt4 book ai didi

javascript - Ajax 请求 : Passing Dynamic Content to modal

转载 作者：太空宇宙 更新时间：2023-11-04 16:21:09 25 4
gpt4 key购买 nike

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

在 cockpit.php 页面上，我使用一个表单从 mysql 数据库中获取一些内容。同时，我能够在 cockpit.php 页面上的 div 中显示此内容。

计划是在模式中显示内容。用户有 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 代码。它向您展示了如何将数据传递给模态，如何显示模态并显示服务器响应。

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

index.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。以下是文件:

index.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']));

关于javascript - Ajax 请求 : Passing Dynamic Content to modal，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29102747/

25 4 0
文章推荐： html - 获取 CSS 和 HTML 中的日期到 PDF 页脚
文章推荐： IE 和 Chrome 中的 CSS 填充问题
文章推荐： css - 寻找杂散的

标签以获得 W3C 验证

文章推荐： html - 在 Perl 中将 DD/MM/YYYY 转换为 YYYY-MM-DD
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com