Javascript 表单使用ajax，无需重新加载页面，可以刷新会话变量

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

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

以下是代码部分：

<?php
session_start();
?>

培根
黄辣椒
黑橄榄
青椒
火腿
汉堡包
意大利香肠
墨西哥胡椒
蘑菇罐头
鲜蘑菇
洋葱
意大利 辣味 香肠
菠萝
烟熏香肠片
额外的奶酪
分类比萨配料
我不明白。您是否有一个状态区域来显示html中的浇头，并且希望在此区域中显示它的更改？您可以选择所需的浇头，然后在单击“下一步”时，我希望这些刚刚选择的浇头填充列表。在这个列表中，用户可以根据比萨饼的哪一面来区分配料。。现在，它可以工作，但排序总是一个刷新后。例如，如果我选择两种配料（意大利香肠和蘑菇），然后点击下一个。然后我点击broswer上的refresh，再次检查所有表格，这次选择3种配料（洋葱、胡椒和辣香肠），当我进入分类列表时，它将填充2种配料（辣香肠和蘑菇）因为当我在broswer上点击refresh时，这些是顶部，所以在我再次进入顶部选择表单之前，页面将这些项目借给了列表。因此，我需要找到一种方法，将会话更新到表单中，并在完成选择页首后加载，而不是在页面的开头。那有用吗？是的，有用。我正在创建一个示例，之后，我将向您展示它，谢谢！让我知道
<!--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"] . ".";
?>