提交表单和刷新产品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“#按钮”，并且试图使用一个名为“#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
            }
        });
    });
});

在本例中，名为data的成功变量是您的JSON将从服务器发送的部分。

现在，PHP可以是这样的：

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

这样，它将使用数据"username“执行请求，并且该请求的te值为$("#username")。然后，PHP会将其收集起来，将其发送回AJAX请求，该请求将其作为JSON存储在变量数据中，您可以在成功函数中使用它。

祝好运!