通過使用JavaScript創建Java Endpoint來添加到mongoDB中

Question

如果你們能回答這個問題，我會留下深刻的印象。基本上我的工作有以下三個部分組成一個完整的堆棧網絡應用：

1. 文章的MongoDB中的集合
2. 後端用Java編寫的8
3. 前端的Javascript

程序應該工作作爲所述的流量如下：

1. 用戶打開網頁輸入文本轉換成一種形式指定標題，作者，流派和內容。
2. 當他們點擊「addArticle」按鈕時，它應該將數據序列化爲原始JSON並將其發送到我的addArticle端點。
3. 然後將數據清理乾淨，並將其提交到數據庫。

我遇到了很多問題。它們分別是：

1. 的Javascript不斷刷新頁面，當我點擊提交按鈕，即使我有$(document).on("submit", "#add-Article", function(e) {e.preventDefault();}（請參見下面相關代碼）。

2. 它看起來並不像打到端點。

3. 沒有被保存在數據庫中

這就是我知道的作品和這裏就是我已經試過：

1. 我已經通過郵差測試這一點，並已能夠成功添加到文章集合中。

2. 我設法把警報放到main.js的開頭，所以我知道它連接到了javascript。

3. 經過大量的研究後，我發現我可以直接使用JavaScript來做類似articles.save的前端。這個問題是我想要數據進入Java，所以我可以清理它，所以它會增加ObjectIds。

下面是相關的代碼

形式

<form id="add-article"> 
 
\t \t \t <input type="text" id="title"/> 
 
\t \t \t <label for="title">Title </label> 
 
\t \t \t <input type="text" id="authors"/> 
 
\t \t \t <label for="authors">Author(s) </label> 
 
\t \t \t <input type="text" id="genre"/> 
 
\t \t \t <label for="genre">Genre </label> 
 
\t \t \t <input type="text" id="content"/> 
 
\t \t \t <label for="content">Content </label> 
 
\t \t \t <button id="addArticle">Submit Article for Peer Review</button> 
 
\t \t </form>

的Javascript

alert('JS is linked to page!'); 
 

 
function Article(Id = 1, Title = "", Authors="", Content = "", Genre = "", Date = 1497484623) { 
 
    \t console.log("JavaScript file loaded successfully"); 
 
    var self = this; 
 
    self.Id = Id; 
 
    self.Title = Title; 
 
    self.Authors = Authors; 
 
    self.Content = Content; 
 
    self.Genre = Genre; 
 
    self.Date = Date; 
 
    self.Save = function() { 
 
     var settings = { 
 
      url: 'localhost:8080/articles/addArticle/', 
 
      method: 'POST' 
 
     }; 
 
     var myData = { 
 
      "Title": self.Title, 
 
      "Authors": self.Authors, 
 
      "Content": self.Content, 
 
      "Genre": self.Genre, 
 
      "Date": self.Date 
 
     }; 
 
     settings.data = myData; 
 
    
 
     $.ajax(settings).done(function(Article) { 
 
     var myArticle = new Article(Article.Id, Article.Title, Article.Authors, 
 
       Article.Content, Article.Genre, Article.Date); 
 
      CreateSuccessRow(myArticle); 
 
     }); 
 
    }; 
 
} 
 

 
    $(document).on("submit", "#add-Article", function(e) { 
 
     e.preventDefault(); 
 
      alert('submit Activated'); 
 
     var title, authors, genre, content; 
 
     title = $("#title").val(); 
 
     director = $("#authors").val(); 
 
     rating = $("#genre").val(); 
 
     notes = $("#content").val(); 
 
     var myArticle = new Article(title, authors, genre, content); 
 
     alert(myArticle.title); 
 
     addArticle(myArticle); 
 
     //$("#add-article")[0].reset(); 
 
     $("#title").focus(); 
 
    
 
    }); 
 

 
function addArticle(Article) { 
 
    alert('addArticle Activated'); 
 
    var settings = { 
 
     url: 'localhost:8080/articles/addArticle', 
 
     method: 'POST' 
 
    }; 
 
    var myArticle = { \t \t 
 
\t \t "Title": Article.Title,  
 
\t \t "Authors" : Article.Authors, 
 
\t \t "Content": Article.Content, 
 
\t \t "Genre" : Article.Genre, 
 
\t \t "Date": 1497484623 
 
    }; 
 
    settings.data = myArticle; 
 
    
 
    $.ajax(settings).done(function(Article) { 
 
     var myArticle = new Article(Article.Title, Article.Authors, Article.Content, 
 
      Article.Genre, Date); 
 
\t \t //CreateArticleRow(myArticle); 
 
     console.log("Article Created"); 
 
    }); 
 
}

控制器端點

`@RestController 

@RequestMapping（ 「/冠詞」） 公共類ArticleController {

private ArticleRepo articleRepo; 

@Autowired 
public ArticleController(ArticleRepo articleRepo) { 
    this.articleRepo = articleRepo; 
} 

@RequestMapping(value = "/addArticle", method = RequestMethod.POST) 
@ResponseBody 
public Article addArticle(@RequestBody Article newArticle) { 
//sanitizing happens here 
    articleRepo.save(newArticle); 
    return newArticle; 
} 

}`

我一直在這一個相同的問題了一天以上，如果有人可以幫助我，我會非常感激。我假設Javascript有問題。

Answer 1

你的jquery選擇器不符合html代碼（add-Article代替add-rticle）。 jquery選擇器似乎區分大小寫

$(document).on("submit", "#add-article", function(e) { 
    e.preventDefault(); 
     alert('submit Activated'); 
    var title, authors, genre, content; 
    title = $("#title").val(); 
    director = $("#authors").val(); 
    rating = $("#genre").val(); 
    notes = $("#content").val(); 
    var myArticle = new Article(title, authors, genre, content); 
    alert(myArticle.title); 
    addArticle(myArticle); 
    //$("#add-article")[0].reset(); 
    $("#title").focus(); 

});