Question

我正在使用jQuery的ajax编写练习网站。目前我有3个按钮，每个按钮在点击时，使用ajax调用显示表单的不同内容。内容存储在不同的文件中。假设您在单击第一个按钮后在显示的内容中输入“AAA”。然后单击第二个按钮，它将用新的第二个内容替换第一个内容。然后你在表格中输入“BBB”。我想要实现的是，当你这样做时，我不希望页面忘记你在第一页中输入的内容（或者你在使用ajax调用改变页面之前），最后，你按下SUBMIT按钮，这在所有按钮的内容中很常见。然后，我希望网页提交“AAA”和“BBB”以进行更多计算。

这有可能吗？这有点像披萨网站。假设网站上有2个标签，一个用于披萨面团选项，另一个用于顶部选项。还假设通过异步显示内容使用ajax发生选项卡的分页。在披萨面团选项卡中选择选项时，您可以更改选项卡以选择顶部选项。然后，您最终下订单，这反映了客户对面团和浇头的选择。

你怎么可能实现这个？任何建议将不胜感激我需要使用SQL的数据库吗？由于这是一个简单的练习网站，因此一旦您提交表单并关闭页面，就不必记住客户的选项。

以下是我的代码的一部分，因为我无法全部编写。我也省略了一些不重要的部分。

php file1：

<script>
    $(document).ready(function(){
        $(".dough, .topping").click(function(){
            $.ajax({
                url: /*URL is either dough.php or topping.php*/
                success: function(data){
                    $(".result").html(data);
                },
                error: function(data){
                    alert("error");
                }
            });
        });
    });
</script>
<button class="dough">Dough</button>
<button class="topping">Toppings</button>
<div class="result"></div> <!--Here I want to show the content with ajax-->

php file2（= dough.php）和file3（= topping.php）：/ *这是包含表单的文件，两者都具有相同的结构* /

<form action="confirm.php" method="POST">
    <!--Pizza's dough and topping photos, price and name etc-->
    <input type="text" name="******"> <!--This is the input form-->
</form>

在这种情况下，我觉得我应该在表单标记之外有最后的“提交”按钮，因为提交按钮很常见，并且应该在页面化过程中保留在页面底部。

Answer 1

<form action="confirm.php" method="POST">
    <!--Pizza's dough and topping photos, price and name etc-->
    <input type="text" class='myValue' name="******">
    <!-- this button is for saving the input entered above; for topping form give 'toppings' class-->  
    <input class='option-button pizza-dough' type='button' value='select'/>
</form>

为上述表单添加事件处理程序

$('.result').on('click','.pizza-dough,.toppings',function(e){
   //using on() because forms are dynamically added
   var myValue = $(this).siblings('.myValue').val();
   if(this).hasClass('.pizza-dough') {
       localStorage.setItem('pizza-dough', myValue);//store the value in localStorage
   }else{
       localStorage.setItem('toppings', myValue);//store the value in localStorage
   }
});

现在，假设您有以下常用提交按钮

<input type='button' value='submit' class='submit-values'/>

为此按钮添加事件处理程序以提交值

$('.submit-values').click(function(e){
   var dataToSend = {'pizza-dough':localStorage.getItem('pizza-dough'),'topppings':localStorage.getItem('toppings')};
   $.ajax({
            url: /*submit url*/,
            method: "POST",
            data: dataToSend,
            success: function(data){
                //handle success
            },
            error: function(data){
                 //handle error
            }
   });
});

为您添加localStorage值的验证。详细了解localStorage和sessionStorage，以选择最适合您的方式。

使用Ajax进行页面更改，仍保存输入的数据

1 个答案: