不刷新页面更改HTML代码

Question

有没有可能在不刷新页面的情况下更改HTML（.jsp）页面？使用案例是用户在文本区域中写入内容，然后点击某个按钮，我需要添加一些对象，即图片到之前定义的位置在我的页面上~~~>我需要更改HTML代码而不刷新页面（不会导致文本框中的文本丢失）。我真的需要更改HTML代码，所以请不要建议任何不更改HTML代码的解决方法。我对前端技术不是很了解，所以我不知道这是否可能，所以请原谅我，如果这是一个愚蠢的问题。我只能使用前端技术。

- Martin Dvoracek

---

这是如此通用，以至于它描述了过去约10年的大部分JavaScript。我建议您查看JQuery-它可能有助于您所需的内容。 - penguat

哦，谢谢。正如我所说的，我通常用Java编写后端，所以我不知道前端技术提供什么和有什么可能性。我会去看看 :) - Martin Dvoracek

请了解JavaScript 事件处理程序以及动态DOM元素创建/CSS显示属性。 - Xavi López

老实说，我会点赞这个。是的，它有些模糊，但我认为会有许多前端初学者搜索这些确切的词汇来尝试完成类似的事情。这是一个帮助将来的初学者指向正确方向的绝佳机会。 - Jace

Answer 1

使用JavaScript库jQuery，您可以利用load()函数在不刷新页面的情况下将另一个HTML文件的内容加载到当前页面上的任何位置（因此，如果需要，甚至可以替换当前HTML）。

jQuery:
http://jquery.com/

jQuery load()：
http://api.jquery.com/load/

---

备选建议：
然而，我知道你说不能刷新页面，但是，如果唯一的原因是因为你需要保留文本框中的文本，你可以使用一个表单将该文本POST到另一个.jsp页面（或者甚至是同一个.jsp页面，这取决于你的处理方式），在那里它将可供您自行决定使用（例如放入另一个文本框中）。

- Jace

---

嗯，你的替代方案太过复杂了...我只需要在某个选项卡组件中添加新选项卡，当用户需要时...而且我不想因此发送所有关于文本的信息以及表单等到服务器上的控制器，并将其返回到相同的视图，仅进行更新...这就像用左手刮右耳一样难以理解.. :) - Martin Dvoracek

@Dworza 哈哈，好的！jQuery是一个非常棒的库，希望它能对你有所帮助。祝一切顺利。 - Jace

Answer 2

也许这对你有用。

<div id="mydiv"></div>
<a id="refresh">click</a>

<script>
$(function() {
  $("#refresh").click(function() {
     $("#mydiv").load("yourdomain.com/file.php")
  })
})

同时查看以下内容：

http://woork.blogspot.nl/2007/10/how-to-change-text-using-javascript.html

（注：此网站为英文原文，需要科学上网访问）

- Kees Sonnema

Answer 3

使用JavaScript，您可以对文档对象模型进行更改。它非常易学且功能强大。

- errieman

Answer 4

您应该使用JavaScript函数document.getElementById（要放置在其中的DIV）.innerHTML = YOUR_TEXT;。

如果您需要从服务器获取响应而不重新加载页面（仍然必须加载，但客户端不会注意到），请尝试使用AJAX。

- user6163731

Answer 5

是的，这是可能的。您应该使用JavaScript来更改用于显示页面的HTML。

您可能会发现使用类似JQuery的库非常有用。

- penguat