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

Best way to include interactive external content in a page (JavaScript, AJAX, jQuery)

提问人:Eli 提问时间:3/22/2012 最后编辑:Eli 更新时间:3/22/2012 访问量:733

问:

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

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

如果我要打开一个弹出窗口,这将很容易,只需将其构建为常规页面即可。但是,将其包含在呼叫页面中会带来一些问题。

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

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

然而,在我开始走这条路之前,我想我会问一下是否有人对在另一个页面中包含一系列复杂页面的最佳方式有任何提示?

无论我做什么,我都想确保我不会对我改变小部件功能的能力关闭大门,我肯定会在以后添加功能——所以保持我的选择开放以备更改很重要。

谢谢!

编辑

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

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

如果它能帮助你想象它,这是客户端和服务器将如何(如果我没有想到更好的方法)协同工作的基本思想:

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

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

  3. 用户填写后,表格将提交到我的网站。帖子将被处理,事情将再次基于请求帐户(即:action=http://mysite.com/widget/post/74.php)。此时,我可能需要拒绝该表单并请求重新发布验证失败、验证码验证等,或者我可能需要提供确认页面,或者只是关闭表单,或其他一些操作。

JavaScript jQuery AJAX 用户界面

评论

0赞 JotaBe 3/22/2012
服务器端有什么?如果使用 ASP.NET MVC,则可以通过使用用户控件并使用 AJAX 显示它们来实现。您的问题不仅出在客户端,如果您不分辨服务器端的内容,我们也无法为您提供帮助。
1赞 James Hay 3/22/2012
我会去 iframe,除非您愿意使用 AJAX 来提取内容并将其显示在同一页面上。这似乎正是 iframe 的设计目的。

答:

0赞 danbgray 3/22/2012 #1

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

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