使用jQuery和chart.js获取并展示气泡图（续：增加新增数据功能）

  《使用jQuery和chart.js获取并展示气泡图》文中使用jQuery调用webapi获取mongodb数据库中的数据，并使用chart.js绘制气泡图。本文在页面中增加新增气泡图数据功能，使用jQuery调用WebAPI向MongoDB中新增气泡图数据。
  首先在webapi中新增创建气泡图数据接口，代码比较简单，就不贴出来了。
  接着在页面中增加新增气泡图数据的表单，内置三个文本框及按钮，效果如下所示：

  然后使用jQuery设置按钮的响应函数，主要是使用ajax通过post方式将数据传递给webapi，最后保存到MongoDB数据库。

		$(addData).click(function()
         {
    
    
            $.ajax({
    
    
            type: "POST",
            url: "http://localhost:2001/api/BubbleData",
            contentType: "application/json", 
            dataType: "json", 
            data: JSON.stringify({
    
     x: $(x).val(), y: $(y).val(),r:$(r).val() }), 
            success: function (jsonResult) {
    
    
                alert(jsonResult);
            }
             });
         })

  这里需要说明的是传递的数据类型的格式，如果数据设置为json样式，则调用webapi时会报bad request错误。
  传递的数据可以调用JSON.stringify函数将JavaScript 对象或值转换为 JSON 字符串，这样就能正常的传递给webapi了。
  还有一点不太明白，就是通过webapi调用MongoDB.Driver保存到MongoDB数据库中的数据，其形式与使用MongoDB终端插入的数据不太一致，如下图所示。集合中总共有6个文档，前2个是通过终端插入的数据，后4个是调用webapi保存的数据，后4个中的值变成了字符串（webapi能正常调用，不会报错），目前还搞不清楚是怎么回事。

  

参考文献：
[1]https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify