jquery – 使用knockout.js从表单中获取或发送数据

前端之家收集整理的这篇文章主要介绍了jquery – 使用knockout.js从表单中获取或发送数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Knockout中的新手,也是前端设计师所以我需要简单的谈话.

我有一个表单,我需要发送到数据库,然后从数据库中检索.

请用非常简单的术语解释如何制作一个工作示例来说明保存和发布表单?

来自淘汰赛教程:http://knockoutjs.com/documentation/json-data.html
我了解获取和发送json数据.如何将json数据与表单匹配?什么是映射,是否有插件或简单示例如何将json数据映射回我的表单?基本上,我如何在下面的淘汰代码示例中做出评论

获取数据:

  1. $.getJSON("/some/url",function(data) {
  2. // Now use this data to update your view models,// and Knockout will update your UI automatically
  3. })

发送数据:

  1. var data = /* Your data in JSON format - see below */;
  2. $.post("/some/url",data,function(returnedData) {
  3. // This callback is executed if the post was successful
  4. })

解决方法

简单的形式
  1. <form data-bind="submit: onSubmit">
  2. <input data-bind="value : firstName"/>
  3. <input data-bind="value : lastName"/>
  4. <input type="submit" text="Submit!"/>
  5. </form>
  6. Response: <span data-bind="text : response"></span>

简单的视图模型

  1. var viewmodel = new function()
  2. {
  3. var self = this;
  4. self.firstName = ko.observable("default first");
  5. self.lastName = ko.observable("default last");
  6. self.responseJSON = ko.observable(null);
  7. self.onSubmit = function()
  8. {
  9. var data = JSON.stringify(
  10. {
  11. first : self.firstName(),last : self.lastName()
  12. }); // prepare request data
  13. $.post("/echo/json",function(response) // sends 'post' request
  14. {
  15. // on success callback
  16. self.responseJSON(response);
  17. })
  18. }
  19. }
  20.  
  21. ko.applyBindings(viewmodel);

JSFiddle DEMO

猜你在找的jQuery相关文章