Question

下面有这个代码，我需要它在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成功地将dividea_produto.php加载到名为“ content”的div内，但是，我需要修改脚本以使其也可以进行POST

另一个话题的人说使用$(".loader").parent("form").submit而不是$(".loader").click，但是我不明白他的意思，我试图以许多不同的方式更改它，但是没有一个起作用

我研究了一些有关如何使用javascript进行发布的主题，但是我什么都不能改编，以保持该函数在div“内容”内部加载Consulta_produto.php的功能。

所以我想知道，当发布一些输入和复选框中的数据时，我该如何适应我的javascript以在content div中继续加载Consulta_produto.php？

Answer 1

首先，您需要：

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

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

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

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

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

数据：第一个参数“数据”包含所有要传递的表单数据一起。
类型：代表请求（POST）的类型
URL：这是表单操作（/consulta/consulta_produto.php）。
成功：最后，“ success”参数包含一个函数它将全部加载到指定的<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>

在Div内发布的Javascript

1 个答案: