Question

如果你们能回答这个问题，我会留下深刻的印象。基本上我正在使用具有以下三个组件的完整堆栈Web应用程序：

MongoDB中的文章集合
用Java 8编写的后端
Javascript中的前端

程序的流程应该如下：

用户打开网页输入文本到指定标题，作者，流派和内容的表单。
当他们点击“addArticle”按钮时，它应该将数据序列化为原始JSON并将其发送到我的addArticle端点。
然后对数据进行清理，并将此文章提交到数据库中。

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

当我点击提交按钮时，Javascript会不断刷新页面，即使我有$(document).on("submit", "#add-Article", function(e) {e.preventDefault();}（请参阅下面的相关代码）。
看起来它根本就没有击中终点。
数据库中没有保存任何内容

以下是我所知道的，以下是我尝试的内容：

我通过Postman测试了这一点，并且能够成功添加到文章集合中。
我设法将警告放入main.js的开头，所以我知道它正在连接到javascript。
经过大量的研究后，我发现我可以直接使用JavaScript来执行前端的 articles.save 之类的操作。这个问题是我希望数据进入Java，所以我可以清理它，因此它将增加ObjectIds。

以下是相关代码

形式

<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

@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();

});

通过使用JavaScript

1 个答案: