前端ajax傳值後台接收並寫入資料庫__資料庫

來源:互聯網
上載者:User
    還是一個小菜鳥的我,第一次寫部落格,多多包涵哦。。。
    這個問題困擾了我兩天,然而解決後發現竟如此簡單。。。
  (1)需求是這樣的,我要實現一個插入圖表的功能,圖表的屬性包括名稱,類型和網址。前端介面是這樣的:

  

    我要將輸入框中的值傳給後台。一開始我是這樣處理的,然而會一直報錯,type:“post”時一直會報405的錯,type:“get”的時候會報類似get unsupported的錯誤,然而此時我並沒有在意用get方法時/api/charts之後帶的參數中http://www.baidu.com中出現"://"的呈現的是亂碼,依舊在糾結是傳輸方法的錯誤。

$(function () {    $('#addModal .addbtn').on('click', function (e) {        var form = $(e.currentTarget).parents('.modal').find('form');        var data = {            name: form.find('input')[1].value,            type: form.find('input')[0].value,            src: form.find('input')[2].value        };        $.ajax({            contentType: "application/json;charset=utf-8",            url: "/api/charts",            type: "post",            data: data,            success: function (data) {                console.log(data);            }        })    })})
    然而糾結一天的錯誤只需要將其中一行加一個方法就可以解決亂碼問題。

將data: data 改成 data: JSON.stringify(data)                                               
 
//添加圖表@RequestMapping(value = "/charts", method = RequestMethod.POST)public ApiResponse<Chart> addChart(@RequestBody Chart chart) {   chartService.insert(chart);   List<Chart> results = new ArrayList<Chart>();   results.add(chart);   return success(1, results);}

  (2)還有一個問題就是前端插入的時候不可能出現id,而Chart對象的屬性包括id,name,type,src。在資料庫建表的時候我建立了一個序列vis_chart_id用於id自增,然後在寫sql的插入圖表的時候只需要寫:

insert into vis_chart(id,name,type,src) values(vis_chart_id.nextval,:name,:type,:src)

    然而這種方法時不可行的,在前端擷取時一直會報錯,id的位置為null,想想也是,前端資料都沒有作為一個完整的對象傳入,肯定是不能成功的。那怎麼辦呢。

作為一名小小的實習生,肯定是去找有經驗的前輩們問啦。多虧前輩的給力,我get到新技能。。。

步驟如下:

    1.首先在dao裡面建立一個方法叫getSequence(),擷取下一次sequence的值用作新插入的圖表的id

@SqlQuery("select vis_chart_id.nextval from dual")@Mapper(IntegerMapper.class)Integer getSequence();
    此時要注意將insert方法中的SQL語句改成

@SqlUpdate("insert into vis_chart(id,name,type,src) values(:id,:name,:type,:src)")//插入chartvoid insert(@BindBean Chart chart);
    2.然後在service中將id賦給chart

public  void insert( Chart chart){   ChartDao chartDao = dbi.onDemand(ChartDao.class);   Integer id = chartDao.getSequence();   chart.setId(id);   chartDao.insert(chart);}

    3.這樣Controller調用insert方法的時候就會chart就會有id啦

//添加圖表@RequestMapping(value = "/charts", method = RequestMethod.POST)public ApiResponse<Chart> addChart(@RequestBody Chart chart) {   chartService.insert(chart);   List<Chart> results = new ArrayList<Chart>();   results.add(chart);   return success(1, results);}

    就是醬,我也不知道我陳述的是否完全正確啦,歡迎大家多多指教。。。


相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.