HTML/Javascript和Web服务-何时使用表单？

随着现代网络技术的发展，有越来越多的方式来完成任务。在我们使用表单发布数据并在服务器端代码中使用它之前。但是今天，当使用javascript和web服务将浏览器用作客户端（没有服务器端代码）时，我在使用表单时有点不知所措。请参见此示例：

我想知道我是否应该使用一个表单来获取我的应用程序页面的参数。 基本上，我目前有：

<div class="form-inline" role="form">
    <div class="form-group">
        <label>Parameter1</label>
        <input class="form-control" id="Parameter1Id" type="text" />
    </div>

    <div class="form-group">
        <button id="RefreshButton" type="button" onclick="RefreshData();" class="btn" >Refresh Values</button>
    </div>
</div>

但我认为在这种情况下，对于这种用法，表单是不必要的，因为我可以只使用对象而不将它们放入表单中

但是，我也注意到，当不使用表单时，有时当表单对象发生变化时，页面会自动重新加载

您能帮助我理解在使用客户端代码时，构建UI的最佳方法是什么吗

---

提前感谢。

如果您想接受用户输入，请始终使用表单

考虑使用JavaScript来改进UI，但首先要在不依赖JS的情况下获得可靠的工作

至于“刷新”问题：看看AJAX和Jquery。Ajax就是为这个问题而设计的

---

叫我老派，但我真的不喜欢“客户端处理”表单的整个想法

使用普通表单，除非您绝对需要使用javascript（99.9%的情况下，您可以使用没有任何javascript的表单）

另外，请记住，输入的所有验证都应该在服务器端完成：我已经见过太多次程序员只在客户端验证用户输入，从而使软件容易受到任何类型的攻击

如果您还想通过javascript检查用户的输入，那么在元素上触发“blur”事件时进行检查；但使用此选项仅用于通知用户。重新检查服务器上的所有内容

---

最后，如果您希望提交表单，并且希望避免重新加载整个页面，则可以使用，它允许您让浏览器在后台执行请求。另外，由于您正在使用jQuery，您可能想知道这一点

我已经在使用它了，我在代码示例中添加了一个小注释来解释。无法在上面添加注释，但您要求保存发送到Web服务的参数，以便在页面重新加载时使用。查看HTML5的本地存储属性以在客户端保存内容。有很多库将在旧浏览器中模拟此功能。在较旧的浏览器中模拟此功能的常用库之一是Modernizer。我不知道渐进增强，这非常好。你能解释一下为什么使用表格更好吗？我只是看不到它有什么变化？因为当JavaScript失败时（因为网络故障使其无法加载，或者它对用户的广告拦截器反应不好，或者因为您有错误，或者因为您使用了用户浏览器不支持的功能，或者因为用户关闭了JS，或者因为用户的浏览器不支持JS）那么这个网站仍然可以工作。除了Javascript之外，还有其他查询web服务的方法吗？在这种情况下，我想这个网站需要一个“方案B”为已经充满内容的页面提供服务。web服务器将查询数据本身？是的，这就是您要做的。您提供的参数非常好，它们帮助我了解很多。在我的情况下，我的应用程序仅用作可视化客户端（报告/图表）。因此，重新加载整个页面没有真正的好处，因为web服务会返回所有数据。有一件事我想了解：当您发布表单时，是否可以在页面重新加载时捕获参数（客户端）调用web服务？我目前使用JQuery进行AJAX调用，而不重新加载页面。我不确定我的问题是否正确，所以如果我错了，请告诉我：您想知道是否可以发布页面，然后，当页面重新加载时，让javascript客户机获取以前通过POST发送的数据，对吗？您可以如果您首先在服务器上获取数据，然后使用一些服务器端语言来生成正在重新加载的页面：您可以使用一些隐藏的输入来存储接收到的数据，并使用javascript检索该数据。小心XSS！好的，我理解。我的情况非常特殊，我没有服务器代码。只有一个Web服务。我没有他是故意的，但我会保留你对未来的建议。所以在我的情况下，AJAX可能是最好的（无需发帖）。感谢你提到XSS，这实际上是一件在你不知道的情况下很难理解的事情！

function RefreshData() {
    // this get data method uses AJAX, from jQUery
    GetData($('#Parameter1Id').val(), dataCallBack, errorCallBack);
}

function dataCallBack(data) {
    UpdateUIData(data);
}