呈现 Ajax 弹出窗口的完美方式答案

【问题标题】：Perfect way to render a Ajax popup呈现 Ajax 弹出窗口的完美方式
【发布时间】：2011-12-30 08:48:24
【问题描述】：

我正在为一家服装店开发内容管理系统。他们可以通过 CMS 添加/编辑/删除。我也在使用 Zend 框架和 jquery。我的应用程序运行良好。然而，服务器突然开始需要更多的时间来响应。然后我对我开发系统的方式产生了疑问。专门用于编辑东西。

我有两种方法来显示 ajax 弹出窗口。假设编辑产品。

方法一：

一旦用户点击编辑按钮，它将向服务器请求相关页面。我为每个弹出窗口使用单独的视图，并使用 CSS 设计它。数据已使用 Zend 表单填充。

方法二：

页面加载后，我向具有编辑屏幕基本布局的视图发送了另一个请求。所以最终我在页面加载后就拥有了编辑屏幕的来源。但没有数据。如果用户点击编辑按钮。它将向服务器发送请求，服务器响应 JSON。然后我处理 json 并用 javascript 填充编辑屏幕。

这是更多的文字。但我写了一切来理解你我的问题。请说明哪种方法最适合这种工作。

谢谢。

【问题讨论】：

标签： php jquery ajax model-view-controller zend-framework

【解决方案1】：

您可以在页面某处隐藏<div> 并带有<div id="editPage" style="display:none;"></div> 然后，使用HTML 对视图进行ajax 调用以填充该div 并显示它。这样你就可以完全避免弹出窗口。所以，使用 Jquery

$('#editPage').load('/myEditAction/', function(){
  $('#editPage').show(); // you could even animate it in with a slider, etc.
});

对于编辑提交按钮，您可以通过 ajax 以同样的方式将其传回：

//you'll have to use live here not bind, because it will come in via ajax...
$('#editSubmit').live('click', function(){
  $.post('/editSubmitAction',$('#edit-form').serialize(), function(data){
    //you can use the data from the post for thank you message, etc.
    $('#editPage').hide();
  });
});

Ajax 使用 Jquery 既有趣又简单，恕我直言。

【讨论】：

【解决方案2】：

弹出窗口或 AJAX 请求不太可能对您的服务器产生任何重大影响，但您可能有一些 javascript 性能不佳。

现在所有服务器请求都变慢了吗？
您的开发环境和生产环境的性能是否具有可比性？
如果您使用浏览器开发者工具监控网络请求，它是否显示页面呈现的最长部分是与服务器的延迟？

【讨论】：