使用ajax更新多个区域

我最近开始学习ajax和javascript，并且仍然掌握了它。但我有一个简单的目标，我试图达到目标，而我已经到了一半。使用ajax更新多个区域

例如。我正在努力管理由一位用户保存的供其他成员使用的书签。我已经构建了可以在页面上实时添加，编辑和删除项目的代码。但是，我如何学习如何编辑部分是'点击字段区域'开始编辑，然后'点击字段区域'，完成更新。我真的想改变这种方式来点击一个按钮来提交编辑。

此外，在页面上它有删除选项旁边的“查看书签”按钮，但我不知道如何更新该链接，当我更新其文本区域而无需刷新页面。

所以基本上我想学习一种更有效的方法来通过ajax进行实时更新，然后当更新完成时，更新页面上相同项目的所有实例（只有两个区域）。

任何帮助将不胜感激。

我可以发表我的原始代码，但我想我可能会更好地向一些知道更好的人学习。大声笑

来源

2016-01-24 logicK

那么，所有这些更新必须手动完成。如果你的对象重复，你可以按（css类，attr名，html对象）对它们进行分组，然后通过jQuery选择器进行迭代。 [https://api.jquery.com/each/](https://api.jquery.com/each/） – Valijon

发布您的原始代码是个好主意，这样这里的人就可以看到您尝试过的内容并可以帮助您更好。 – dee

这是一个通用的问题，所以我会回答一般的答案。

如果你有，例如，2 div小号

<div id="area1"></div> 
<div id="area2"></div>

而且你要拨打的服务器，并获得2个数据的每个div，所以看起来这会：（我使用jQuery为的例子..

$.ajax({ 
    url:'server_url', 
    method: 'post', 
    success: function(data) { 
     $('#area1').html(data.objForArea1); 
     $('#area2').html(data.objForArea2); 
    } 
});

从服务器返回（例如）的JSON

{ 
    objForArea1: '<div class="list-item">item 1</div>...' 
    objForArea2: '<div class="list-item">item 1</div>...' 
}

因此，您从ajax调用返回的对象读取响应，然后将数据放到任何地方。

来源

2016-01-24 11:27:48

使用ajax更新多个区域

回答

相关问题