javascript mvc和ajax表单提交答案

【问题标题】：javascript mvc and ajax form submittingjavascript mvc和ajax表单提交
【发布时间】：2010-10-27 19:11:40
【问题描述】：

我刚开始研究 javascript 客户端 (JavaScript MVC) 上的 mvc。在我提交表单之前，一切看起来都很棒：）查看部分不会这样做，这很简单。事件附加在 Controller 中，因此 Controller 是验证表单数据的好地方，但我不确定我是否希望我的 Controller 知道特定的服务器地址（用于发布我的表单），所以在 Model 中有一个方法会很棒，但后来我不想让我的模型知道我的表单（实际上是 html 结构......）。

嗯，我想念 MVC 概念的什么？我也不确定是否要在 Controller 中序列化我的表单，然后将其作为参数传递给我的模型。目前，我认为使模型独立的唯一选择是拥有 JavaScript 结构（实体），它将由控制器（基于表单数据）填充，并将传递给模型方法以保存在服务器上。非常简化的代码：

Info = {
    name,
    address,
    // 15 more properties
    ...
}

InfoController = {
    ...
    onFormSubmit: function() {
       ... 
       info.name = document.getElementById("info-name").value;
       info.adress = document.getElementById("info-address").value;
       ...
       InfoModel.save( info );
    }
}

InfoModel = {
    ...
    save: function( info ) {
        // here some code to setialize info object 
        // send it to server
        ...
    }
}

但这让我的代码太复杂了（与一些框架的简单表单序列化相比，只是发送它..）。什么是正确的选择？

【问题讨论】：

标签： javascript ajax model-view-controller

【解决方案1】：

只是回答我自己的问题。简短的回答 - 是的，我的假设是正确的；）我看了一下JavaScriptMVC，并注意到我错过了一件简单的事情，可以开发一个简单的函数来创建基于表单的 javascript 对象（他们有一个名为 formParams 的函数来执行这种类型的转换）。这样我的控制器就被简化了：

InfoController = {
    ...
    onFormSubmit: function() {
       ... 
       var info = $infoForm.formParams();
       InfoModel.save( info );
    }
}

现在它看起来并不那么复杂，它的优点是有一个地方（模型）知道如何保存数据（验证；要发送的 url；其他一些东西，比如将此实体添加到客户端“存储”；触发将要创建新事物的事件；根据我们的需要进行其他任何操作），如果我有更多的地方，或者控制流再次执行此操作，我将不再编写此代码，并且它不依赖于在演示文稿（是形式，还是只是一组输入，向导等）。模型也变得非常可重用。

实际上，在使用这种方法之前，我们有类似的东西，但不是那么结构化（在我可以运行 javascript 的应用程序的不同演示中）。

【讨论】：