提交表单并刷新产品 div 而不刷新页面

Question

我在 index.php 上有一个表格

<div id="right-div">
 <form name="m_srch" id="m_srch" action="'.tep_href_link(FILENAME_DEFAULT).'" method="get" > 
    ..........
 </form>
</div>

它是使用处理的

ext/form/form.php 它包含在顶部的 index.php 中，使用

require('ext/form/form.php');

ext/form/form.js

---

在form.php的末尾包含js文件

<script type="text/javascript" src="ext/form/jquery-1.10.2.js"></script>
<script type="text/javascript" src="ext/form/jquery-ui.js"></script> 
<script type="text/javascript" src="ext/form/form.js"></script>

表单的工作方式是在单击复选框时——刷新整个页面以列出过滤后的产品。

我希望只刷新产品 div 而不是整个页面。 产品在下面的div中

<div id="left-div">......</div>

请帮助完成这项工作将不胜感激.....

Answer 1

您需要在提交表单时向您的服务器发出 AJAX 请求，然后将处理后的数据发送回您的 JavaScript（例如使用 JSON）。例如，如果您的按钮的 id 为“#button”，而您正尝试使用名为“#username”的输入框进行操作：

$(document).ready(function(){ // Initialize when document is ready
    $("#button").click(function(){ // Button is clicked
        var username = $("#username").val();
        $.ajax({ // do AJAX
            url: "form.php", // in form.php
            method: "POST", // with POST
            data: {username = username},    // in PHP, $_POST['username'] is the value of your username input box
            success: function(data) {
                // do something with the JSON
            }
        });
    });
});

在此示例中，成功的变量称为数据，是您的 JSON 将从服务器发送的部分。

现在，你的 PHP 可能是这样的：

<?php
    $username = $_POST['username'];
    echo json_encode($username);
?>

这样，它将使用数据“用户名”发出请求，并且该请求的值为 $(“#username”)。然后 PHP 将接收它，将其发送回 AJAX 请求，该请求将其作为 JSON 存储在变量数据中，您可以在成功函数中使用它。

祝你好运！