在页面中包含交互式外部内容的最佳方式(JavaScript、AJAX、jQuery)



我将创建一个小部件样式的工具,其工作方式如下:

  1. 通过在任何页面上放置脚本/按钮组合,它都可以包含在该页面中
  2. 单击该按钮后,将从我的网站加载一个表单,该表单可以填写并提交
  3. 根据提交的信息,可能会显示另一个表单-例如,带有captcha的第二个页面,或者需要一些操作的确认页面,或者可能只是关闭表单,或者我稍后添加的其他操作

如果我打开一个弹出窗口,这将很容易,只需将其构建为一个常规页面。然而,将其包含在调用页面中会带来一些问题。

如果我实际将表单内容加载到调用页面上的本地div中,它就会成为页面内容的一部分。我知道我可以使用脚本在一定程度上操纵这些内容(它会从我的网站上为该小部件的特定版本加载一个脚本),重新发布表单并将它们加载到同一个div中,在我完成后隐藏div,等等。但这似乎会使事情复杂化。

我的另一个选择是在iframe中实现这一切,这样它就不会真正成为加载页面调用页面的一部分。这样一来,我有点觉得自己失去了以后可能需要的一些功能。这可能是我无论如何都要走的路。

然而,在我开始这条路之前,我想我会问是否有人对在另一个页面中包含一系列复杂页面的最佳方法有什么建议?

无论我做什么,我都想确保我不会关闭改变小部件功能的大门,我以后肯定会添加功能,所以保持我的更改选项是很重要的。

谢谢!

编辑

关于JotaBe的问题,在服务器端,我将使用PHP。

然而,我确信这并不重要,因为PHP处理将(一如既往)在服务器上进行。所有客户端(请求页面)都会知道它请求了,然后通过HTTP接收到JS/HTML/CSS/JON/ETC资产。它不会知道,也不会关心服务器是如何生成这些资源的。

如果它能帮助你描绘它,这就是客户端和服务器如何协同工作的基本想法(如果我想不出更好的方法的话):

  1. 客户端页面将(加载时)从我的网站请求一个.js文件。此文件将根据请求的URL动态生成。例如,帐号#74会请求http://mysite.com/widget/js/74.js并接收为该帐户定制的JavaScript资产。

  2. 当点击"小部件按钮"时,它将使用JavaScript从我的网站请求HTML表单,并以某种方式将其包含在页面中(哪种方式最好是整个问题)。HTML表单将根据请求动态生成并为账号#74定制(即:http://mysite.com/widget/form/74.php)。

  3. 一旦用户填写,表格将提交到我的网站。帖子将被处理,内容将再次根据请求帐户发生(即:操作=http://mysite.com/widget/post/74.php)。在这一点上,我可能需要拒绝该表格,并要求重新张贴验证失败、验证码验证等信息,或者我可能需要提供一个确认页面,或者简单地关闭该表格,或者采取其他行动。

无论采用何种方式(语言/平台等),最佳实践都是使用mvc或hmvc,将应用程序的各种逻辑组件分开。您可以通过使用一些视图模板来创建弹出窗口,这些模板不呈现其包含的标记,这些模板是为javascript/jquery.load()语句设计的。然后,您可以设计一系列组件,这些组件被设计为加载通过uri传递的参数。

这里有一篇文章可能有助于解释你想要的一种可能的设计模式:http://www.phpied.com/ajax-mvc/

最新更新