如何使用javascript通过AJAX调用访问数据库？

Question

我在这方面很陌生，请耐心等待。

我正在使用ASP.NET MVC。

当有人单击与某个数据库条目对应的按钮时，我创建了一个覆盖页面的覆盖层。 因此，我用于此功能的所有代码都位于项目中包含的.js文件中。

我需要做的是使用AJAX调用从数据库本身中提取与我的条目相对应的信息，并将其放入我的文本框中。 然后，在最终用户进行了所需的更改之后，我需要更新该条目的值以匹配输入。 我已经上网了一段时间，但没有找到有效满足我需求的示例。

到目前为止，这是我的JavaScript文件中的代码：

function editOverlay(picId) {
      //pull up an overlay
      $('body').append('<div class="overlay" />');
      var $overlayClass = $('.overlay');

      $overlayClass.append('<div class="dataModal" />');
      var $data = $('.dataModal');

      overlaySetup($overlayClass, $data);


      //set up form
      $data.append('<h1>Edit Picture</h1><br /><br />');

      $data.append('Picture name: &nbsp;');
      $data.append('<input class="picName" /> <br /><br /><br />');

      $data.append('Relative url: &nbsp;');
      $data.append('<input class="picRelURL" /> <br /><br /><br />');

      $data.append('Description: &nbsp;');
      $data.append('<textarea class="picDescription" /> <br /><br /><br />');

      var $nameBox = $('.picName');
      var $urlBox = $('.picRelURL');
      var $descBox = $('.picDescription');

      var pic = null; 

//this is where I need to pull the actual object from the db
      //var imgList = 
      for (var temp in imgList)  {
          if (temp.Id == picId) {
              pic= temp;
              }
          }

  /*
      $nameBox.attr('value', pic.Name);
      $urlBox.attr('value', pic.RelativeURL);
      $descBox.attr('value', pic.Description);
  */

      //close buttons
      $data.append('<input type="button" value="Save Changes" class="saveButton" />');
      $data.append('<input type="button" value="Cancel" class="cancelButton" />');


      $('.saveButton').click(function() {
          /*
          pic.Name = $nameBox.attr('value');  
          pic.RelativeURL = $urlBox.attr('value');
          pic.Description = $descBox.attr('value');
          */

          //make a call to my Save() method in my repository

          CloseOverlay();
      });

      $('.cancelButton').click(function() {
          CloseOverlay();
      });
  }

我已注释掉的内容是我需要完成的工作，并且/或者在解决先前的问题之前不可用。

任何和所有建议，不胜感激！ 记住，我是这个东西的新手（准确地说，是两个星期），可能需要非常明确的说明。

顺便说一句：overlaySetup（）和CloseOverlay（）是我在其他地方居住过的函数。

谢谢！

Answer 1

您不能（也不应该永远）直接从Javascript连接到数据库。 即使您理论上可以（我想没有不可能），您也不应该； 您必须以一种公开的方式向公众开放数据库，这样一来，致力于安全的任何人在完成自己的工作后就会无所适从。

相反，您应该做的是找到一些可以充当数据库代理的中介。 如果这足够好提示，则几乎与ASP.NET相同。

如果不是：

创建一个自定义ASP.NET控件，并将其填充到表单数据服务器端 。 对其后处理句柄进行验证，然后在服务器端更新数据库。

Answer 2

我使用jQuery （在幕后使用HTTP Request对象）。 当然，您必须创建一个与之通信的Web服务，该服务可以访问数据库。 您应该将XML和JSON视为格式化要传递的数据的替代方法。

Answer 3

可以使用jQuery完成ajax调用，它会将Post发送到控制器操作。 控制器将接受Post并执行持久性。

jQuery的

  $('.saveButton').click(function() {
      //prepare your content
      var data = {
          name: $nameBox.val(),
          relativeUrl: $urlBox.val(),
          description: $descBox.val()
      };

      //make a call to my Save() method in my repository          
      $.ajax({
          url: "/mycontroller/action",
          data: JSON.stringify(data),
          type: "POST",
          cache: false,
          contentType: "application/json; charset=utf-8"
      }).done(function(data) {
          //do something when request returns
          CloseOverlay();
      });
  });

调节器

public class MyController : BaseController
{
    [HttpPost]
    public ActionResult Action(string name, string relativeUrl, string description)
    {
        //not sure what repository you're using.
        //replace this with your actual repository implementation
        var repository = new MyRepository();
        repository.Save(name, relativeUrl, description);
    }
}

Answer 4

这听起来像WCF数据服务的完美任务。 基本上，这使jQuery直接（几乎）与您的数据库对话。 请查看http://stephenwalther.com/blog/archive/2010/03/30/using-jquery-and-odata-to-insert-a-database-record.aspx作为示例。