AJAX REST调用不发送数据

Question

After I click submit button, my form and page refreshes, and nothing is sent to datebase.

Code in 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);

    }
});
});

code in 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);
}

And code in 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 is good, becouse I hardcoded subforum object, and writed down to .txt file. I think that problem is between subforum.js and SubforumController.java

Answer 1

After I click submit button, my form and page refreshes

this is frequently caused by the form post ocuring rather than your custom $.ajax POST code.

and nothing is sent to database.

As $.ajax POST occurs asynchronously, the form's post occurs first, refreshing your page and thus not hitting your own submit handler.

There are two relatively easy options for this:

• e.preventDefault in the handler

eg

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

• don't submit on the button

Change

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

to

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