Home / Questions / 52775
Accepted
ByGroxD
Asked: 2020-03-03 10:56:33 +0800 CST 2020-03-03 10:56:33 +0800 CST

按下按钮时在 div 中加载链接

  • 772

当我按下“生成”按钮时，我需要在“证书”div 中加载一个链接。

DIV 在我想显示其他链接的地方显示为黑色

    <div class="container-fluid">
    <div class="side-body">
    <h1 class="titleh">Generar Certificado</h1>
    <div style="width: 40%;">
    <form action="#">
        <div class="form-group">
          <label for="dirigido">Dirigido a:</label>
          <input type="text" class="form-control" name="dirigido" id="dirigido" placeholder="Ingrese un valor">
        </div>
        <div class="form-group">
          <label for="cc">Cedula:</label>
          <input type="password" class="form-control" name="cc" id="cc" placeholder="Ingrese Cedula">
        </div>
        <input type="submit" value="Generar" name="Generar" class="btn btn-sm" style="color: white; background: #006050;">
    </form>
    </div>
    <br><br><br>
    <div class="container" style="width: 100%; height: 490px; background-color: #A7A7A7"></div>

    </div>
</div>
javascript

4 Answers

  1. Best Answer

    根据您在问题和评论中所说的，要咨询的 URL 是通过基于任何 URL 的 ID (cc) 生成的，我认为出于安全原因，此处无法显示。

    假设要检索的内容在同一个域上。如果不是，请检查目标服务器上的 CORS 规则。

    知道了这一点，您所要做的就是向该 URL 发出 AJAX 请求以下载 HTML：

    $('form').on('submit', function (e) {
  e.preventDefault();

  let cc = $(this).find('#cc').val();
  $('.container').load(BASE_URL + '?cc=' + cc); 
});

    如果该请求返回动态内容，最好使用object或iframe将该 URL 直接加载到文档中。例如：

    HTML

    <obejct data="" type="text/html" id="certificado"></object>

    javascript

    $('form').on('submit', function (e) {
  e.preventDefault();

  let cc = $(this).find('#cc').val();
  $('certfificado').attr('data', BASE_URL + '?cc=' + cc);
});

    该 URL 是外部的，我无法从客户端使用它。我可以做什么？

    在这种情况下，您只需在服务器而不是客户端上下载 HTML：

    // archivo get_external_html.php
<?php echo file_get_contents($_GET['url']); ?>

    并且必须对该文件进行 AJAX 请求。

    $('.container').load('//get_external_html.php?url=http://externo.com?cc=' + cc);

    或嵌入：

    <object data="'//get_external_html.php?url=http://externo.com?cc=af7s5f5w" type="text/html"></object>
    • 7

  2. 首先，我会根据您的表格修改一些内容

    • 删除action="#"solo以避免发送时刷新页面form。
    • 将 更改input为 abutton并删除类型submit，因为我们不会刷新页面或刷新它。

     

    <form name="Certificado">
  <div class="form-group">
    <label for="dirigido">Dirigido a:</label>
    <input type="text" class="form-control" name="dirigido" id="dirigido" placeholder="Ingrese un valor">
  </div>
  <div class="form-group">
    <label for="cc">Cedula:</label>
    <input type="password" class="form-control" name="cc" id="cc" placeholder="Ingrese Cedula">
  </div>
  <button name="Generar" class="btn btn-sm" style="color: white; background: #006050;">Generar</button>
</form>

<br><br><br>
<div class="container" style="width: 100%; height: 490px; background-color: #A7A7A7"></div>

    我会用 jQuery做submitcom 函数click

    $('button[name="Generar"]').on('click', function(){
  //serializamos el formulario el cual el formato a serializar seria
  //dirigido=embajada&cc=123456
  var datos = $('form[name="Certificado"]').serialize();
  //hacemos la peticion ajax para enviar la informacion del formulario y mostrar los datos en el div
  $.ajax({
    type: 'POST',
    url: 'url/destino',
    data: datos,
    success: function (data) {
      //mostrando que recibe data
      console.log(data)
      //mostrando los datos en el div si recibe un html
      $('.container').html(data);
    },
    error: function(objXMLHttpRequest){
      //mostrando el error
      alert("error" );
    }
  });
});
    • 5

  3. 创建一个“Onclick”函数并填写您需要的记录或创建一个 JQuery 函数来检查它何时是提交事件然后执行您需要的函数

    • 2

  4. 使用该功能.load()，您将能够加载另一个页面上的内容并将其放在您想要的位置

    function cargaContenido() {
  $('#container').load('documento.php');
}

<input type="submit" value="Generar" name="Generar" ... onclick='cargaContenido()'>
    • 2