时间戳

首页 > 解决方案 > Javascript 在 div 中发布

javascript - Javascript 在 div 中发布

问题描述

我在下面有这段代码，我需要它在 div 中发帖。

<script type="text/javascript">
$(function() {
    $(".loader").click(function(event) {
        event.preventDefault(); // stop the link loading the URL in href
        $('#content').load($(this).attr('href'));
    }); 
});
</script>



<form method="post">

some random inputs and checkbox's goes here

<input type="submit" href="/consulta/consulta_produto.php" class="loader" value="Consultar">

</form>

提交时，javascript成功地将consulta_produto.php加载到名为“content”的div中，但是，我需要调整脚本以使其也可以发布

其他主题的人说使用$(".loader").parent("form").submit代替$(".loader").click，但是我不明白他的意思，我尝试以很多不同的方式更改它，但没有一个起作用

我研究了一些关于如何使用 javascript 发布的主题，但我无法调整它们以保持在 div“内容”中加载 Consulta_produto.php 的功能

所以我想知道，我如何调整我的 javascript 以在从某些输入和复选框发布数据时继续在内容 div 中加载 Consulta_produto.php？

标签： javascriptphpjqueryhtml

解决方案

首先，您需要：

  1. <script>在加载相关 HTML 后放置所有代码，或者
  2. 将其全部包裹在一个$(document).ready(function() {...});中以达到相同的效果

click()然后，您可以在表单事件中执行，而不是在您的输入事件中执行代码submit()。（这基本上是您提到的某人在另一个主题中告诉您的内容）。我将您的提交输入更改为提交按钮，这并不重要。

因此，不是加载href属性，而是action将表单本身的属性加载到 div 中。

当然，您想与表单一起提交实际数据 - 没问题。您只需使用AJAX方法。这是为了阻止页面重新加载。

首先，您preventDefault()要停止通常的页面重新加载。然后初始化$.ajax()方法。

  • 数据：第一个参数“数据”包含要传递的所有表单数据。
  • 类型：表示请求的类型（POST）
  • URL：这是表单操作 (/consulta/consulta_produto.php)。
  • 成功：最后，“成功”参数包含一个函数，该函数将其全部加载到指定的<div>.

在 PHP 中避免页面重新加载时，AJAX 是必不可少的，试试吧！

    <script type="text/javascript">
    $(document).ready(function() {
        $("#form").submit(function(event) {
            event.preventDefault();

        $.ajax({ //AJAX Method
            data: $(this).serialize(), //Gets data from form
            type: $(this).attr('method'), //Gets the method, in your case POST
            url: $(this).attr('action'), //Gets the form action
            success: function(r) {
                $('#content').html(r); //Loads data into div
            }
        }); //End of AJAX Method

        }); //End of form submit event
    });
    </script>

这是您的 HTML： 

    <div id="content" style="width:100%; height:500px; ">
    </div>

    <form id="form" action="/consulta/consulta_produto.php" method="post">

        some random inputs and checkbox's goes here
        <button type="submit">Consultar<button>
    </form>

推荐阅读