Question

我是一个新手所以请原谅我的无知。

我有一个带有php购物车的网站，当有东西被添加到购物车时，它会刷新到购物车页面。我想修改它，以便在添加产品时，购物车在后台更新，产品页面不会刷新，但会更新具有唯一ID的各种div中的html。
我已经成功实现了这个目标，但我确信必须有一个更简单的方法，因为我的解决方案涉及一个遍历产品页面上所有表单的循环，而不仅仅是从提交的表单中更新div。

这是我的JavaScript，它位于产品页面的<head>标记内：

<script>
$(document).ready(function(){
       $("[id^=ectform]").ajaxForm({   // any form id beginning with ectform
          success:function(){
          $.ajaxSetup({ cache: false });
          $("#div1").load("jsrefresh.php");  // update html in div in minicart
             for (i = 0; i < count; i++) {     // count holds the number of forms on the page
                var d = "#glc" + i; //  div id to update
                var f ="#gld" + i;   // another div id to update
                var e = eval("z" + i);  // product id
       $(f).html('loading...').load("jsrefreshincart.php",{ prodynum: e, divno: d});
      };
     }
  });
});
</script>

该脚本使用ajaxForm等待成功提交任何具有以ectform开头的Id的表单。成功后，表单将提交到购物车脚本，更新购物车内容，然后使用ajax .load调用jsrefresh.php，它将更新后的html回显到显示在屏幕顶部的迷你购物车中的div 。然后（这是需要正确执行的位）jsrefreshincart.php在循环中调用（变量count保存页面上的表单总数），它更新页面上所有表单内所有div中的html以及有关如何购物车中有很多物品，价格是多少有没有办法在没有循环的情况下执行此操作，因为只需要更新提交的表单中的div？

Answer 1

这里的主要问题不是你有一个循环，而是你有一个服务器调用。处理这个的最好方法是改变{{1}的方式处理来自服务器的调用。而不是在循环中多次调用循环，收集所有数据并在循环外部进行单次调用。

我不认为这是jQuery Form插件可以处理的东西;相反，你可能不得不写一些自定义代码（如下所示）：

jsrefreshincart.php

您的<script> $(document).ready(function() { $("[id^=ectform]").on('submit', function(e) { e.preventDefault(); $('[id^=gld]').html('loading...'); // Trigger all loading messages simultaneously var formNums = []; for (i = 0; i < count; i++) { formNums.push(i); } $.post({ $(this).attr('action'), // Where to send the form action formNums: formNums, // The data to send when submitting the Ajax call refreshCartData // The callback used to refresh the page }); }); }); // Called automatically when the server responds with data function refreshCartData(data) { // Loop through all forms and update them for (var i = 0; i < data.length; i++) { // Update HTML $('#gld' + data[i].formNum).html(data[i].cartHTML); } } </script>应该返回所有这些的数据。例如：

jsrefreshincart.php

其他一些建议：

您的原始代码中的变量d，e和f未必在Ajax往返期间全部更新

您需要添加更多评论和缩进 - 这看起来很简单，但正确的文档是将您的问题传达给其他开发人员的最佳方式

除了＆＃34; <?php // Used to load the cart data - I'm sure you have something similar require_once('cart.php'); // Send everything back as JSON header('Content-type: application/json'); // Initialize the data to send back $data = array(); // Iterate over all data send to the server foreach ($_POST['formNums'] as $formNum) { $data[] = array( // The unique ID for the form number 'formNum' => $formNum, // Again, however you get the view data for your cart line items works fine 'cartHTML' => Cart::getCartHTML($formNum) ); } // Spit out the JSON data echo json_encode($data);表单＆＃34;之外，请考虑使用不同的方式来跟踪数据。 - 课程也可以工作

我的假设是以ID为count开头的任何内容都是捕获此功能的表单;如果不是这种情况，上述解决方案的某些部分可能没有意义

Answer 2

在看了Dykotomee（谢谢）的建议之后，它让我知道如何在没有循环的情况下修改我的脚本：

<script>
 $(document).ready(function(){ // when DOM is ready
   $("[id^=ectform]").on('submit', function(e) {  // on submission of any form with id beginning "ectform"
    e.preventDefault();             // prevent the form itself submitting the data
      var subformid = $(this).attr('id'); // set variable with the id of the submitted form
       $(this).ajaxSubmit({     // submit the form via ajax which will add the product to the cart
        success:function(){    //on successful submission of the form
         $.ajaxSetup({ cache: false }); // turn off cache so the updates will refresh on all browsers
         $("#div1").load("jsrefresh.php");  //  load div in mini cart with new updated cart quantity
        var str = subformid.replace("ectform", "");  // trim subformid to leave just the end digits and call this variable str
       var d = "#glc" + str;   // not important for purposes of explanation
      var f ="#gld" + str;  // f is the id of the div in the submitted form to be updated 
    var e = eval("z" + str);  // e is the product number
$(f).html('Adding item to Cart...').load("jsrefreshincart.php",{ prodynum: e, divno: d}); // send data to jsrereshincart.php and load updated html into div f.
      }
    });
   });
 });
</script>

我使用了ajaxSubmit而不是ajaxForm，这允许我使用$("[id^=ectform]").on('submit', function(e) {.......触发表单的提交然后，我能够捕获用var subformid = $(this).attr('id');提交的表单的ID 现在我有了提交表单的id，我能够使用ajax .load将更新的购物车HTML以特定形式提供给div，而不是循环遍历所有表单并逐个更新。该脚本现在每个表单提交总共只有2个服务器调用。当产品页面上最多显示25个产品/表单时，我之前的脚本最多可拨打50个电话。我可以修改这个脚本和php脚本，只需一次调用即可完成所有操作，但网站上的其他页面没有产品，只有迷你购物车，因此更容易将脚本分开。

使用ajaxForm提交表单而不刷新页面

2 个答案: