php 使用javascritp的开放模式

hjzp0vay 于 2022-10-30 发布在 PHP

关注(0)|答案(3)|浏览(106)

**我正在尝试用javascript打开一个模态，如果 AJAX 表单被执行，有人能帮助我吗？*我正在使用bootstrap库和jquery基本上，如果表单被发送，以便没有错误发生，那么模态应该打开，就像表单被发送到数据库 *

index.html

<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="js/main.js"></script>
    </head>

    <body>
        <form method="post">
            <input type="text" id="nome" name="nome" placeholder="Digite o nome" />
            <br/>
            <input type="email" id="email" name="email" placeholder="Digite o email" />
            <br/>
            <input type="button" id="btn_gravar" value="Salvar" name="salvar" />
        </form>
        <div id="resposta"></div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="js/main.js"></script>

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            Launch demo modal
          </button>

          <!-- Modal -->
          <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  ...
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
          </div>

    </body>

</html>

这是我的javascript表单，用于从后端和前端请求 *

main.js

$("#btn_gravar").on("click",function(){
    var txt_nome = $("#nome").val();
    var txt_email = $("#email").val();

    console.log(txt_email + " - " + txt_nome);

    $.ajax({
        url: "create.php",
        type: "post",
        data:{
            nome: txt_nome, email: txt_email
        },
        beforeSend : function(){
            $("#resposta").html("Enviando...");

        }
    }).done(function(e){
        $("#resposta").html("Dados registrado amigo com sucesso...");
        $("#exampleModal").modal("show");//<--this line that was to open the modal

    })
})

$("#btn_atualizar").on("click",function(){
    var txt_nome = $("#nome").val();
    var txt_email = $("#email").val();
    var txt_id = $("#id").val();

    console.log(txt_email + " - " + txt_nome);

    $.ajax({
        url: "update.php",
        type: "post",
        data:{
            nome: txt_nome, email: txt_email, id: txt_id
        },
        beforeSend : function(){
            $("#resposta").html("Enviando...");
        }
    }).done(function(e){
        $("#resposta").html("Dados atualizado com sucesso...");
        window.location="read.php";
    })
})

php

来源：https://stackoverflow.com/questions/74215575/open-modal-with-javascritp

3条答案

按热度按时间

bpzcxfmw1#

请让开

<script src="js/main.js"></script>

和

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

在</body>之前，也可以将其移动到<head>标记内部

赞(0）回复(0）举报 2022-10-30

kjthegm62#

正如Paul Mahardika所写的那样，将main.js和jquery移到结束body标记之前，您必须将引导javascript移到jquery之后，因为它使用了jquery。
就像这样：

<body>
...
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>        
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>        
    <script src="main.js"></script>
</body>

或者只是将bootstrap移到<head>中的jquery之后，并将main.js中的代码 Package 在document.ready函数中：

$(document).ready(function(){
    ...insert your current main.js code here
});

您还可以删除<div id="resposta"></div>下面的main.js和jquery

赞(0）回复(0）举报 2022-10-30

bq3bfh9z3#

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<script>
  jQuery(document).ready(function()
  {
   jQuery("#btn_gravar").on("click",function(){
    var txt_nome = jQuery("#nome").val();
    var txt_email = jQuery("#email").val();
    jQuery.ajax({
        url: "<?=base_url()?>/Test/insert_data/",
        type: "get",
        data:{
            nome: txt_nome, email: txt_email
        },
        beforeSend : function(){
            jQuery("#resposta").html("Enviando...");
        }
    }).done(function(e){
        jQuery("#resposta").html("Dados registrado amigo com sucesso...");
        jQuery("#exampleModal").modal("show");//<--this line that was to open the modal

      })
    })

    jQuery("#btn_atualizar").on("click",function(){
      var txt_nome = jQuery("#nome").val();
      var txt_email = jQuery("#email").val();
      var txt_id = jQuery("#id").val();

      console.log(txt_email + " - " + txt_nome);

      jQuery.ajax({
          url: "update.php",
          type: "post",
          data:{
              nome: txt_nome, email: txt_email, id: txt_id
          },
          beforeSend : function(){
              jQuery("#resposta").html("Enviando...");
          }
      }).done(function(e){
          jQuery("#resposta").html("Dados atualizado com sucesso...");
          window.location="read.php";
      })
    })
  });

  </script>
  <body>
    <form method="post">
      <input type="text" id="nome" name="nome" placeholder="Digite o nome" />
      <br/>
      <input type="email" id="email" name="email" placeholder="Digite o email" />
      <br/>
      <input type="button" id="btn_gravar" value="Salvar" name="salvar" />
    </form>
    <div id="resposta"></div>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
      Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </body>

这对我的工作

赞(0）回复(0）举报 2022-10-30

我来回答

php 使用javascritp的开放模式

3条答案

相关问题

热门标签

最新问答