在Div内发布的Javascript

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已成功在名为“ content”的div内加载了Consulta_produto.php，但是，我需要修改脚本以使其也可以发布

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

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

因此，我想知道，在发布来自某些输入和复选框的数据时，我该如何适应我的JavaScript以便继续在content div中加载Consulta_produto.php？

Answer 1

首先，您需要：

1. 在相关HTML加载后放置所有<script>代码，或者
2. 将所有内容包装在$(document).ready(function() {...}); 达到同样的效果

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

因此，您无需加载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>