在HTML中使用模式弹出窗口并返回上一页

Question

我正在学习HTML，CSS，JavaScript和SQL。

以下信息是“上下文”

该方案是一个网站，我可以在其中添加有关狗的信息，关于狗的主人的信息，并将狗与主人链接。数据存储在SQL数据库中。

我可以成功添加一条关于狗和主人的记录，并通过将OwnerTable主键作为DogTable中的外键来链接它们。一切都很好。

要求能够创建最初没有所有者的狗记录，然后再添加所有者。或者，当我添加一条狗记录时，我可能会将其分配给数据库中的现有所有者。

说我要添加一条狗记录，然后意识到我想链接到不在数据库中的所有者。

现在是问题/问题。

我可以在“添加狗”页面上添加一个按钮，这将允许我添加新的所有者，而在“中间”添加新的狗记录。从我的阅读看来，有两种方法：

1. 只需使用href切换到现有的“添加所有者”页面
2. 当我单击添加所有者按钮时，创建一个模式弹出窗口（正确的术语？）

现在1.似乎不太可取，因为添加新所有者后，我将不得不导航回添加狗页面。

1. 似乎更有吸引力，因为工作流不会中断，就像用户体验是“我需要添加一条狗，但我需要添加一个所有者。我将快速添加一个所有者，然后继续添加该狗而不添加丢失我已经输入的有关狗的信息”

但是，我期望2出现的问题是我将有两个执行相同操作的代码实例-一个用于添加所有者的“独立”网页和一个用于添加所有者的模式弹出窗口。我担心的是，页面和模式之间将有重复的代码-如果以后我需要以某种方式更改“添加所有者”代码，则会导致维护问题。

是否有解决此重复的方法-或我可以使用的其他HTML / JS设施-但仍保留以下功能：（1）“独立”添加所有者或（2）在添加新狗记录的同时添加所有者？

Answer 1

您可以对添加所有者页面和模式版本使用相同的请求端点。您唯一需要维护的就是添加所有者页面。如果您不使用任何服务器端技术，我认为最简单的方法是在模式中放置一个iframe，以便您可以为模式和添加所有者使用相同的html文件页。这篇文章提供了有关使用纯正的javascript-Partial render in HTML/JavaScript

做Asp.Net所谓的partial view的更多信息。

请注意，如果某人在浏览器中禁用了javascript，则使用纯javascript方法很容易失败。