javascript - 通过使用 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. 我已经通过 Postman 对此进行了测试，并且能够成功添加到文章集合中。

2. 我设法将警报放入 main.js 的开头，因此我知道它正在连接到 javascript。

3. 经过大量研究后，我发现我可以直接使用 JavaScript 在前端执行类似 articles.save 的操作。这样做的问题是，我希望数据进入 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");
    });
}

Controller 端点

`@RestController

@RequestMapping("/文章") 公共(public)类 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-rarticle)。 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();

});