Question

我目前正在开发一个基于Web的应用程序，它具有用户界面，当用户从下拉菜单中选择一个选项时，需要更新。这可能以级联的方式发生，例如：

用户从第一个选择字段中选择一个选项
GUI已更新并显示可供选择的其他选择字段（例如，精炼类别）
用户优化选择，这可能会导致其他更新等。

我正在使用jquery从服务器加载更新的片段。到目前为止，我只需要更新一个＆＃34; piece / block＆＃34;一次接口，我试图最小化传输的数据量 - 所以如果我只需要更新一个选择框，我用

$(document).on("change",'select[name="first_level_select_field"]',function(){
    $.get('/ajax/handler.php',{"action" : "get_second_level", 
                "first_level_value" : $(this).val()})
    .error(function(data,msg,text){
        alert("Request failed:"+data+","+msg+':'+text);
    })
    .success(function(data,status,text){
        $('select[name="first_level_select_field"]').html(data);
    });
});

正如您所看到的，服务器端创建了一个现成的＆＃34; html-piece插入第二级选择框。其他用户交互也是如此。

现在我遇到了一个新的用例，它要求我不仅要更新单个选择字段，还要向用户显示适当的提示。第一个解决方案是向服务器发出另一个ajax请求以获取信息（再次是一段HTML）并在正确的位置插入GUI。虽然这肯定有效，但我想知道我是否正在做这件事＆＃34;对＆＃34; - 有些想法来找我：

提出多个请求是个好主意，还是应该创建一个＆＃34;包＆＃34; （例如，将部分包装在JSON数组中）并在客户端进行处理
对于更复杂的GUI：使用某种容器元素并且每次都更新整个容器更好（这简化了客户端的代码，但引入了额外的延迟并增加了要传输的数据量）< / LI>
欢迎提出任何建议和讨论 - 也许只是TIMTOWTDI的另一个案例，任何产生正确结果的解决方案都可以。

Answer 1

我个人解决这个问题的方法是让你的handler.php文件为你提供一个新的表单元素，其中包含提示/工具提示。这样可以保持AJAX请求，并允许服务器执行某些逻辑操作。

基本上，而不是：

<select class="my_form">
    <option> 1</option>
    .
    .
</select>

你可能有php函数返回：

<div class="custom_form">
    <div class="form_hint>YOUR HINT</div>
    <select>
    .
.
</div>

对于更复杂的GUI更新，我认为通常最好由MVC风格的应用程序框架（backbone.js，RoR等等）处理。如果真的想用jQuery做，我怀疑你每次都想要更新整个表单。

Answer 2

请看一下这个主题：Better Many Small Ajax Request Or A Big One For Global Site Performance问题似乎相似。

在那里重新解释答案：它取决于用户预期如何使用该页面。这些ajax请求是否经常发生？你能预测一些用户＆＃39;选择与否？

一些想法：

您可以在页面加载后立即预取一些数据（例如选择选项列表）。
您可以间隔在后台加载它们。
混合。您可以预先加载用户最需要的数据，并在需要时获取其余数据。

请记住，每个ajax请求都会产生开销（标头等）。如果有许多小请求，总开销可能不值得。

此外，如果您希望自己的网站摆脱加载时间（以及用户等待），最好尽可能多地预加载。

关于你的具体困境，我个人会预先加载一套选择和提示。

Ajax更新多个UI元素 - 最佳实践

2 个答案: