通过使用JavaScript点击Javaendpoint添加到mongoDB

Question

如果你们能回答这个问题，我会印象深刻的。基本上，我正在开发一个全堆栈的web应用程序，它包含以下三个组件：

1. MongoDB文章集
2. 用Java 8编写的后端
3. Javascript前端

程序流程应如下所示：

1. 用户打开网页将文本输入到指定标题、作者、流派和内容的表单中。
2. 当他们单击“addItem”按钮时，它应该将数据序列化为原始JSON并将其发送到我的addItemendpoint。
3. 然后数据被清理，它应该将这篇文章提交到数据库中。

我遇到了多个问题。它们如下：

>

当我单击submit按钮时，Javascript会不断刷新页面，即使我有$（文档）。在（“submit”，“#add Article”，函数（e）{e.preventDefault（）；} （请参阅下面的相关代码）。

它看起来根本没有达到终点。

数据库中未保存任何内容

以下是我知道有效的方法，以下是我尝试过的方法：

>

我已经通过Postman对此进行了测试，并且能够成功地添加到文章集合中。

我设法在main的开头发出警报。js，所以我知道它连接到javascript。

在做了大量的研究之后，我发现我可以直接使用JavaScript来做一些类似文章的事情。保存前端。问题是，我希望数据进入Java，以便对其进行清理，从而增加ObjectId。

这是相关代码

类型

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

Javascript

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

function Article(Id = 1, Title = "", Authors="", Content = "", Genre = "", Date = 1497484623) {
   	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 = {		
		"Title": Article.Title,     
		"Authors" : Article.Authors,
		"Content": Article.Content,
		"Genre" : Article.Genre,
		"Date": 1497484623 
    };
    settings.data = myArticle;
 
    $.ajax(settings).done(function(Article) {
        var myArticle = new Article(Article.Title, Article.Authors, Article.Content,
            Article.Genre, Date);
		//CreateArticleRow(myArticle);
        console.log("Article Created");
    });
}

控制器终结点

`@RestController

@请求映射（“/文章”）公共类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代码不匹配（添加文章而不是添加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();

});