AJAX REST 调用不发送数据答案

【问题标题】：AJAX REST call don't send dataAJAX REST 调用不发送数据
【发布时间】：2017-09-18 13:41:51
【问题描述】：

单击提交按钮后，我的表单和页面刷新，没有任何内容发送到数据库。

subforum.js 中的代码

$(document).on('click','#submit',function(e) {
var user = JSON.parse(sessionStorage.getItem("ulogovan"));
console.log("usao u submit");
alert("Usao");
var dataObject = JSON.stringify({
    'title': $('#titleSubforum').val(),
    'description': $('#descriptionSubforum').val(),
    'iconPath': $('#pictureSubforum').val(),
    'mainModerator': user.username,
    'rules': $('#rulesSubforum').val()

});

alert($('#rulesSubforum').val());

$.ajax({
    type : 'POST',
    url : "../WebProjekat/rest/subforums/create",
    contentType : 'application/json',
    dataType : "json",
    data: dataObject,

    success : function(data) {
        console.log("USAO U CUVANJE ");
        alert("all good");
        window.location.href = "index.html";


    },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
        alert("something wrong");
        console.log(textStatus);
        console.log(user);

    }
});
});

SubforumController.java 中的代码

package controllers;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.ws.rs.Consumes;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.Context;
import javax.ws.rs.core.MediaType;

import beans.Subforum;
import services.SubforumService;

@Path("/subforums")
@Consumes(MediaType.APPLICATION_JSON)
@Produces(MediaType.APPLICATION_JSON)
public class SubforumController {

private SubforumService subforumService = new SubforumService();

@GET
public List<Subforum> getSubforums() {
    return subforumService.getAllSubforums();
}

@POST
@Path("/create")
public Subforum createSubforum(Subforum subforum) {
    System.out.print(subforum.getTitle());

    return subforumService.createSubforum(subforum);
}

以及SubforumService.java中的代码

package services;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import datebase.DatebasePath;
import beans.Subforum;


public class SubforumService {

public SubforumService() {      
}

private Map<String, Subforum> subforums = DatebasePath.getSubforums();

public Subforum createSubforum(Subforum subforum) {
    subforums.put(subforum.getTitle(), subforum);
    DatebasePath.saveData(DatebasePath.subforumsPath);

    return subforum;
}

public List<Subforum> getAllSubforums() {
    return new ArrayList<Subforum>(subforums.values());
}

}

DatebasePath 很好，因为我对子论坛对象进行了硬编码，并写入了 .txt 文件。我认为问题出在 subforum.js 和 SubforumController.java 之间

【问题讨论】：

检查控制台以查看来自请求的错误和/或响应文本
您是否忘记了提交按钮的e.preventDefault？您没有包含 html，所以无法确定，但我假设您的提交按钮是 <input type='submit' id='submit'>submit</input> - 如果是这样，请将其更改为 <input type='button' id='submit'>submit</input>
查看 chrome 检查器的网络选项卡。您的服务器是否提供 http 404 或 200 或什至什么也没发生？
您不是在调用您的服务器，而是在调用本地 URL "../WebProjekat/rest/subforums/create"。难怪这不起作用。
@JeremyThille 这是一个相对路径，相对于页面的 url，因此将使用与页面呈现相同的“服务器”（无论是远程还是本地都不清楚），它不是“本地”网址”。

标签： javascript java jquery ajax rest

【解决方案1】：

点击提交按钮后，我的表单和页面刷新

这通常是由 form 帖子出现而不是您的自定义 $.ajax POST 代码引起的。

没有任何东西发送到数据库。

由于$.ajax POST 异步发生，表单的帖子首先发生，刷新您的页面，因此不会触发您自己的提交处理程序。

有两个相对简单的选择：

e.preventDefault 在处理程序中

例如

$(document).on('click','#submit',function(e) {
    e.preventDefault();
    // remaining code

不要在按钮上提交

改变

<input type='submit' id='submit'>submit</input>

到

<input type='button' id='submit'>submit</input>

【讨论】：