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

Posted 2023-02-22

【中文标题】提交表单并刷新产品 div 而不刷新页面

【英文标题】：Submit form and refresh product div without refresh page

【发布时间】：2016-02-03 07:58:52

【问题描述】：

我在 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>

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

【问题讨论】：

Ajax 是您正在寻找的东西！

用 ajax 函数调用写下你的完整代码。

如你所说，你需要使用 AJAX，你可以看看 Jquery 来查找实用程序。

我是这个 Ajax 工作的一个小新手，请你解释一下并帮助我如何做到这一点......

form.js 有 '$('#m_srch').submit();'最后....是否要对其进行编辑以使其与 ajax 一起使用

【参考方案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 存储在变量数据中，您可以在成功函数中使用它。

祝你好运！

【讨论】：

I do not have a submit button, It is automatically triggered via js when a checkbox on form is selected.....as mentioned in my above post.我希望提交所有数据而不是表单上的特定元素.....请您解释一下如何完成...

抱歉，请稍等，我会想办法解决的。

你能把你的整个表格贴出来吗？或者至少给我一份需要提交哪些数据的清单？

好的，我会尝试这样做.....但是我们不能提交所有表单数据......因为现在它正在提交刷新时的所有数据

抱歉，如果我有点不清楚，请发布我给我一个代码链接，以便我可以尝试一下