Question

我有一个要求，我需要将表单数据从一个HTML页面传递到另一HTML页面。共5页。用户按以下顺序输入数据：

第一页：名称

第二页：重量

第三页：高度

第4页：出生国家/地区

第5页：显示所有输入的数据，并作为ajax请求将其发送到数据库。

我知道我可以采用一种形式获取用户数据，不需要多个页面，但这是我的项目所独有的，必须采用上述方式。我尝试将数据作为URL参数传递，但是在第一页之后，该变量被第二页的变量覆盖。请帮我是HTML和js的新手。

Answer 1

sessionStorage和localstorage都可以使用。您可以根据需要选择任何一个人

sessionStorage，示例：

  sessionStorage.setItem('name', 'my name');
  let data = sessionStorage.getItem('name');
  sessionStorage.removeItem('name');
  sessionStorage.clear();

localStorage：示例：

       save data: localStorage.setItem('Name', 'My name');
       get data : localStorage.getItem('Name');
       remove data from local : localStorage.removeItem('Name');

我希望这会为您带来惊喜

Answer 2

您有可显示的代码吗？就目前而言，这可能不是一个可以回答的问题。但是，通常您可以将一页中的值存储在<input type="hidden"> html标记中，并在下一次调用中使用该值。最后，您可以通过js中的XMLHttpRequest()发出ajax请求，但是您将需要PHP或Python之类的后端脚本来处理与数据库的通信。这是我可以尝试的示例，假设您已将表单数据发送到下面的假设页面：

<form action="height.html" method="GET">
    <input hidden="text" name="valuetopass" />
    <input type="submit" value="Submit" />
</form>

然后您可以像这样添加javascript：

var data = window.location.search; // You have parse after this point

数据现在将包含一个字符串，该字符串包含您的url，并附加上一个表格中的值，并且您需要对其进行解析以获取 just 值，然后可以使用该值来设置您的调用document.getElementsByName("valuetopasss");

的下一个隐藏输入值

Answer 3

HTML本质上是无状态的，这意味着对页面的每个文件访问都是一个新世界。要传递数据，您可以将数据编码为URL，或者需要一个在页面之间存储数据的后端。

替代方法是一些浏览器会话存储。如果您要谈论的是单页应用程序，则可以将JavaScript与保存信息的对象一起使用。

Answer 4

您可以看看这个answer

描述了如何使用会话存储或本地存储或URL参数

但我真的建议您使用一种形式并构建类似向导形式的东西像这样的链接

https://bootsnipp.com/snippets/eN4qy

https://www.w3schools.com/howto/howto_js_form_steps.asp

https://colorlib.com/wp/free-bootstrap-wizards/

Answer 5

您需要使用会话存储。像这样将变量存储在会话存储中。

这是您的html ...

 <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginStart="@dimen/marketplace_14dp"
                    android:layout_marginTop="@dimen/marketplace_15dp"
                    android:background="@color/color_black"
                    android:gravity="center"
                    android:text="@string/activity_checkout_1"
                    android:textColor="@color/white"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:layout_marginStart="@dimen/marketplace_14dp"
                    android:text="@string/activity_checkout_billing_address"
                    android:textColor="@color/color_black"
                    android:textSize="18sp"
                    android:textStyle="bold" />

            </LinearLayout>

            <View
                android:id="@+id/activity_checkout_billing_view"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginStart="@dimen/marketplace_14dp"
                android:layout_marginTop="@dimen/marketplace_15dp"
                android:layout_marginEnd="@dimen/marketplace_14dp"
                android:background="#DEE2E6" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginStart="@dimen/marketplace_14dp"
                    android:layout_marginTop="@dimen/marketplace_15dp"
                    android:background="@color/color_black"
                    android:gravity="center"
                    android:text="@string/activity_checkout_2"
                    android:textColor="@color/white"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:layout_marginStart="@dimen/marketplace_14dp"
                    android:text="@string/activity_checkout_shipping_address"
                    android:textColor="@color/color_black"
                    android:textSize="18sp"
                    android:textStyle="bold" />

            </LinearLayout>

            <View
                android:id="@+id/activity_checkout_shipping_view"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginStart="@dimen/marketplace_14dp"
                android:layout_marginTop="@dimen/marketplace_15dp"
                android:layout_marginEnd="@dimen/marketplace_14dp"
                android:background="#DEE2E6" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginStart="@dimen/marketplace_14dp"
                    android:layout_marginTop="@dimen/marketplace_15dp"
                    android:background="@color/color_black"
                    android:gravity="center"
                    android:text="@string/activity_checkout_3"
                    android:textColor="@color/white"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:layout_marginStart="@dimen/marketplace_14dp"
                    android:text="@string/activity_checkout_shipping_method"
                    android:textColor="@color/color_black"
                    android:textSize="18sp"
                    android:textStyle="bold" />

            </LinearLayout>

            <View
                android:id="@+id/activity_checkout_payment_method_view"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginStart="@dimen/marketplace_14dp"
                android:layout_marginTop="@dimen/marketplace_15dp"
                android:layout_marginEnd="@dimen/marketplace_14dp"
                android:background="#DEE2E6" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginStart="@dimen/marketplace_14dp"
                    android:layout_marginTop="@dimen/marketplace_15dp"
                    android:background="@color/color_black"
                    android:gravity="center"
                    android:text="@string/activity_checkout_4"
                    android:textColor="@color/white"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:layout_marginStart="@dimen/marketplace_14dp"
                    android:text="@string/activity_checkout_payment_method"
                    android:textColor="@color/color_black"
                    android:textSize="18sp"
                    android:textStyle="bold" />

            </LinearLayout>

            <View
                android:id="@+id/activity_checkout_payment_information_view"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginStart="@dimen/marketplace_14dp"
                android:layout_marginTop="@dimen/marketplace_15dp"
                android:layout_marginEnd="@dimen/marketplace_14dp"
                android:background="#DEE2E6" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginStart="@dimen/marketplace_14dp"
                    android:layout_marginTop="@dimen/marketplace_15dp"
                    android:background="@color/color_black"
                    android:gravity="center"
                    android:text="@string/activity_checkout_5"
                    android:textColor="@color/white"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:layout_marginStart="@dimen/marketplace_14dp"
                    android:text="@string/activity_checkout_payment_information"
                    android:textColor="@color/color_black"
                    android:textSize="18sp"
                    android:textStyle="bold" />

            </LinearLayout>

            <View
                android:id="@+id/activity_checkout_confirm_order_view"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginStart="@dimen/marketplace_14dp"
                android:layout_marginTop="@dimen/marketplace_15dp"
                android:layout_marginEnd="@dimen/marketplace_14dp"
                android:background="#DEE2E6" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="25dp"
                    android:layout_height="25dp"
                    android:layout_marginStart="@dimen/marketplace_14dp"
                    android:layout_marginTop="@dimen/marketplace_15dp"
                    android:background="@color/color_black"
                    android:gravity="center"
                    android:text="@string/activity_checkout__6"
                    android:textColor="@color/white"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:layout_marginStart="@dimen/marketplace_14dp"
                    android:text="@string/activity_checkout_confirm_information"
                    android:textColor="@color/color_black"
                    android:textSize="18sp"
                    android:textStyle="bold" />

            </LinearLayout>

            <View
                android:id="@+id/activity_checkout_confirm_information_view"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginStart="@dimen/marketplace_14dp"
                android:layout_marginTop="@dimen/marketplace_15dp"
                android:layout_marginEnd="@dimen/marketplace_14dp"
                android:background="#DEE2E6" />


        </LinearLayout>

在您的js中使用此代码

<input type="text" id="name" >
<button onClick="SaveAndGo()">Next Page</button>

对用户的所有其他属性（例如体重，身高和国家/地区）使用相同的代码

如何在html中将数据从一页传递到另一页？

5 个答案: