javascript - 每当发生变化时自动更新所有用户的 html dom

Question

很抱歉问了这么菜鸟的问题。但我很久以前看过一个视频，我认为它是一个基于 jquery 的框架，如果用户对一个对象进行一些 CRUD 更改，该对象的属性不仅会自动更新 1 个用户，还会自动更新所有其他用户浏览器。我试图找到它，但我完全迷失了!如果您能帮助我，我将非常感激。谢谢!

Answer 1

假设您有一个如下所示的 html 表单

<form>
    <input type="text" name="firstName" value="Jackson" />
    <input type="text" name="lastName" value="Rivera" />
    <textarea name="lifestory">
        When i was 2yo, spot died...
    </textarea> 
</form>

只需在要动态更改的每个元素上添加一个 OnChange 事件即可:

<form>
    <input .. ..  onchange="shareValueWithOthers(this.name, this.value)"/>
    <input .. .. onchange="shareValueWithOthers(this.name, this.value)"/>
    <textarea onchange="shareValueWithOthers(this.name, this.innerHTML)">
        When i was 2yo, spot died...
    </textarea> 
</form>

请注意，元素值(或者在文本区域的情况下 - 它的内容)的更改会导致函数 shareValueWithOthers(this.name, this.value) 开始运行。 this.name 是名称变量，this.value 是值变量，this.innerHTML 是内容变量.

<小时/>

现在您必须编写一个 Javascript 函数，以便可以将更改发送到服务器。查看AJAX 。创建一个向 PHP 脚本发送 POST 请求的函数。

<小时/>

您的 PHP 脚本应将所有值保存在数据库中，或以 JSON 格式保存在服务器上的文件中。 JSON 是最简单的。查看JSON PHP PARSER .

<小时/>

最后但并非最不重要的一点。如果您做正确的事情，并确保用户输入的每个新值都会由 PHP 脚本更新到您的 json 文件中。您可以进行最后一步。这是创建一个 javascript 函数来检索 JSON 文件。 JSON 代表 JavaScript Object Notation，因此您的 javascript 可以立即使用它。

接下来您要做的是更改 DOM 中与检索到的 JSON 对象中的值不同的所有值。