在 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 成功将 consulta_produto.php 加载到名为“content”的 div 中，但是，我需要调整脚本以使其也可以 POST

其他主题的人说使用 $(".loader").parent("form").submit 而不是 $(".loader").click，但是我不明白他的意思，我尝试了很多不同的方式来改变它，但都没有用

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

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

Answer 1

首先，您需要:

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

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

所以，而不是加载 href属性，您加载 action将表单本身的属性添加到 div 中。

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

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

• Data:第一个参数'data'包含所有要传递的表单数据一起。
• Type:表示请求的类型(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>