使用ajax的表单，没有页面重新加载，获取Sessions变量要刷新

时间：2015-05-11 16:07:58

标签： javascript php jquery ajax session

对于在没有一系列页面的情况下构建Web表单我有些新意。我以前是一名PHP程序员，现在我开始使用一些javascript技术，比如通过AJAX与我的PHP文档进行通信，我遇到了一个问题。

所以我在一个页面上有一系列表格，用于为在线订购网站制作披萨。 一般来说表单正常工作，我可以从表单中提取POST数据以存储到会话中。我的问题是，在第二种形式上，用户在他们的披萨上选择他们想要的配料。 然后最后一个表单使用这些浇头来填充使用jQuery可排序脚本的列表，以便用户可以将他们的浇头分类到比萨饼的左侧，整个或右侧。 问题是，由于所有这些表单都在一个页面上，因此页面会从原始页面加载中加载会话变量，并且当用户从选择浇头时设置它们时，它们已经被加载到页面中，因此它们不会不刷新。所以基本上当我通过浏览器手动刷新页面时，jquery可排序表单总是会显示我选择的顶部时间我在刷新页面之前选择它们。基本上我需要在用户选择顶部时更新会话并推送已加载表单的更新。

以下是代码部分：

<?php
session_start();
?>

<!--Fourth Pizza Form, Select What Kinds Of Toppings-->                  
<div id="pizzatoppingtypes" >
     <form method="post" name="toppingtypesform" id="toppingtypesformid">   
        <div id="main">
            <div class="example">
              <div>
                <input id="toppingtypes" type="checkbox" name="toppingtypes" value="Bacon"/><label style="color:black" for="bacon"><span><span></span></span>Bacon</label>
              </div>
              <div>
                <input id="toppingtypes" type="checkbox" name="toppingtypes" value="Banana Peppers"/><label style="color:black" for="bananapeppers"><span><span></span></span>Banana Peppers</label>
              </div>
              <div>
                <input id="toppingtypes" type="checkbox" name="toppingtypes" value="Black Olives"/><label style="color:black" for="blackolives"><span><span></span></span>Black Olives</label>
              </div>        
              <div>
                <input id="toppingtypes" type="checkbox" name="toppingtypes" value="Green Peppers"/><label style="color:black" for="greenpeppers"><span><span></span></span>Green Peppers</label>
              </div>
              <div>
                <input id="toppingtypes" type="checkbox" name="toppingtypes" value="Ham"/><label style="color:black" for="ham"><span><span></span></span>Ham</label>
              </div>    
              <div>
                <input id="toppingtypes" type="checkbox" name="toppingtypes" value="Hamburger"/><label style="color:black" for="hamburger"><span><span></span></span>Hamburger</label>
              </div>
              <div>
                <input id="toppingtypes" type="checkbox" name="toppingtypes" value="Italian Sausage"/><label style="color:black" for="italiansausage"><span><span></span></span>Italian Sausage</label>
              </div>
              <div>
                <input id="toppingtypes" type="checkbox" name="toppingtypes" value="Jalapeno Peppers"/><label style="color:black" for="jalapenopeppers"><span><span></span></span>Jalapeno Peppers</label>
              </div>
              <div>
                <input id="toppingtypes" type="checkbox" name="toppingtypes" value="Canned Mushrooms"/><label style="color:black" for="cannedmushrooms"><span><span></span></span>Canned Mushrooms</label>
              </div>             
              <div>
                <input id="toppingtypes" type="checkbox" name="toppingtypes" value="Fresh Mushrooms"/><label style="color:black" for="freshmushrooms"><span><span></span></span>Fresh Mushrooms</label>
              </div>        
              <div>
                <input id="toppingtypes" type="checkbox" name="toppingtypes" value="Onions"/><label style="color:black" for="onions"><span><span></span></span>Onions</label>
              </div>
              <div>
                <input id="toppingtypes" type="checkbox" name="toppingtypes" value="Pepperoni"/><label style="color:black" for="pepperoni"><span><span></span></span>Pepperoni</label>
              </div>    
              <div>
                <input id="toppingtypes" type="checkbox" name="toppingtypes" value="Pineapple"/><label style="color:black" for="pineapple"><span><span></span></span>Pineapple</label>
              </div>
              <div>
                <input id="toppingtypes" type="checkbox" name="toppingtypes" value="Sliced Smoked Sausage"/><label style="color:black" for="slicedsmokedsausage"><span><span></span></span>Sliced Smoked Sausage</label>
              </div>
              <div>
                <input id="toppingtypes" type="checkbox" name="toppingtypes" value="Extra Cheese"/><label style="color:black" for="extracheese"><span><span></span></span>Extra Cheese</label>
              </div>              
            </div>
        </div>
     </form>    
</div>
<div><button href="#" id="btn4">Sort Pizza Toppings</button></div>  

<!--Fifth Pizza Form, Sort The Toppings-->    
<div id="pizzatoppingsort" >
            <form method="post" name="splittoppings" id="splittoppingsid    
                <div id="main">
                    <div class="example">
                        <div>
                            <!--The First Half (Left Side) Of The Pizza-->
                            <div id="pos" width="200px">
                                <img src="https://raw.githubusercontent.com/dhierholzer/onlineordering/master/images/pizzaleft.gif"/>
                                <h3>First Half</h3>
                                    <ul id="sortable1" class="connectedSortable">
                                      <!--The Potential Moved Items Go Here-->
                                    </ul>
                            </div>
                            <!--The Whole Pizza-->  
                            <div id="pos" style="margin-left:200px;" width="200px">
                                <img align="center" src="https://raw.githubusercontent.com/dhierholzer/onlineordering/master/images/pizza.gif"/>
                                <h3>Whole Pizza</h3>
                                    <ul id="sortable3" class="connectedSortable">
                                    <?php 

                                      if(isset($_SESSION["selectedarray"][0])) {echo '<li class="ui-state-default">' . $_SESSION["selectedarray"][0] . '</li>';} else {echo ' ';}
                                      if(isset($_SESSION["selectedarray"][1])) {echo '<li class="ui-state-default">' . $_SESSION["selectedarray"][1] . '</li>';} else {echo ' ';}
                                      if(isset($_SESSION["selectedarray"][2])) {echo '<li class="ui-state-default">' . $_SESSION["selectedarray"][2] . '</li>';} else {echo ' ';}
                                      if(isset($_SESSION["selectedarray"][3])) {echo '<li class="ui-state-default">' . $_SESSION["selectedarray"][3] . '</li>';} else {echo ' ';}
                                      if(isset($_SESSION["selectedarray"][4])) {echo '<li class="ui-state-default">' . $_SESSION["selectedarray"][4] . '</li>';} else {echo ' ';}
                                      if(isset($_SESSION["selectedarray"][5])) {echo '<li class="ui-state-default">' . $_SESSION["selectedarray"][5] . '</li>';} else {echo ' ';}
                                      if(isset($_SESSION["selectedarray"][6])) {echo '<li class="ui-state-default">' . $_SESSION["selectedarray"][6] . '</li>';} else {echo ' ';}
                                      if(isset($_SESSION["selectedarray"][7])) {echo '<li class="ui-state-default">' . $_SESSION["selectedarray"][7] . '</li>';} else {echo ' ';}
                                      if(isset($_SESSION["selectedarray"][8])) {echo '<li class="ui-state-default">' . $_SESSION["selectedarray"][8] . '</li>';} else {echo ' ';}
                                      if(isset($_SESSION["selectedarray"][9])) {echo '<li class="ui-state-default">' . $_SESSION["selectedarray"][9] . '</li>';} else {echo ' ';}
                                      if(isset($_SESSION["selectedarray"][10])) {echo '<li class="ui-state-default">' . $_SESSION["selectedarray"][10] . '</li>';} else {echo ' ';}
                                      if(isset($_SESSION["selectedarray"][11])) {echo '<li class="ui-state-default">' . $_SESSION["selectedarray"][11] . '</li>';} else {echo ' ';}
                                      if(isset($_SESSION["selectedarray"][12])) {echo '<li class="ui-state-default">' . $_SESSION["selectedarray"][12] . '</li>';} else {echo ' ';}
                                      if(isset($_SESSION["selectedarray"][13])) {echo '<li class="ui-state-default">' . $_SESSION["selectedarray"][13] . '</li>';} else {echo ' ';} 
                                    ?>
                                    </ul>
                            </div>  
                            <!--The Second Half (Right Side) Of The Pizza-->    
                            <div id="pos" style="margin-left:400px;" width="200px">
                                <img src="https://raw.githubusercontent.com/dhierholzer/onlineordering/master/images/pizzaright.gif"/>
                                <h3>Second Half</h3> 
                                    <ul id="sortable2" class="connectedSortable">
                                      <!--The Potential Moved Items Go Here-->
                                    </ul>
                            </div>
                        </div>  
                    </div>
                </div>
            </form>
</div>
<!--Add Pizza Item To Cart-->
<div style="margin-left:600px;"><button href="#" id="btn5">Add Pizza To Cart</button></div> 


<!--Javascript:-->


$('#btn4').click(function(e){   
var selected = new Array();
$("input:checkbox[name=toppingtypes]:checked").each(function()
    {
               selected.push($(this).val());
             $.post("toppingtypes.php",
            {
              selectedarray: selected,
            },
            function(data,status){
            });
    });
  // alert(selected); (Was Used To Test Value)

    $('#pizzatoppingtypes, #btn4').fadeOut('slow', function(){
            $('#pizzatoppingsort, #btn5').fadeIn('slow');
            $('#toppingtypesformid').submit();      
    });
});


<!--PHP: (In a different location) (toppingtypes.php)-->


<?php
session_start();
$selectedarray = $_POST["selectedarray"];
$_SESSION['selectedarray'] = $selectedarray;
echo "." . $_SESSION["selectedarray"] . ".";
?>

这是一个位置到我的GitHub Repositiry，如果你想查看这个披萨订购部分的所有代码（我剥离了所有的CSS和Visuals，以便更容易排除故障） https://github.com/dhierholzer/Basiconlineordering

再次感谢您的帮助！

0 个答案:

没有答案
相关问题
最新问题