3

У меня есть форма <form> и AJAX скрипт, с помощью которого я отправляю данные в контроллер, где после добавляю их в БД.

Вот форма.

<form:form method="POST" modelAttribute="message" accept-charset="utf-8" ng-app="vandh" ng-controller="validateCtrl" name="messageForm" novalidation="true">
    <form:textarea path="text" class="form-control" rows="1" name="message" id="message" ng-model="message" required="true"></form:textarea>
    <div style="color: black" ng-show="messageForm.message.$dirty && messageForm.message.$invalid">
        <span ng-show="messageForm.message.$error.required">
            <spring:message code="label.entermessage" />
        </span>
    </div>
    <br>
    <div class="text-center">
        <button class="btn btn-success" id="addMessage" name="addMessage">
            <spring:message code="label.sendmessage"/>
        </button>
    </div>
</form:form>

AJAX скрипт

    <script>
$("#addMessage").click(function(e) { 
    e.preventDefault();
    var text = $('#message').val();
    $.ajax({ 
    type : "POST", 
    url: "/app/user/messages/${iddialog}" , 
    async : true, 
    dataType:'json',
    contentType: 'application/json',
    data : { 
    text : text 
    } 
    }); 

    });
</script>   

Вот контроллер на POST.

@RequestMapping(value = "/user/messages/{iddialog}", method = RequestMethod.POST) public
@ResponseBody Message messages(HttpServletRequest request,HttpServletResponse response,
@PathVariable(value = "iddialog")int iddialog,Principal principal,@RequestParam(value = "text")String text)
{
    System.out.println("ITS HERE");
    if(checkingMessage(text)!=true){
        DateFormat dateFormat=new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
        // get current date time with Date()
        Date date=new Date();
        System.out.println(dateFormat.format(date));
        Dialog dialog=new Dialog();
        dialog.setIddialog(iddialog);
        Message mess=new Message();
        mess.setText(text);
        mess.setDialog(dialog);
        mess.setDate(dateFormat.format(date));
        mess.setMessender(principal.getName());
        this.messageService.addMessage(mess);
        this.dialogService.updateUnreadMessInfo(iddialog,principal.getName());

        System.out.println("message sent!");
        return mess;
    }else{
        Message mess1=new Message();
        return mess1;
    }
}

И в итоге оно мне возвращает сам объект Message Результат работы контроллера

Как сделать чтобы метод POST работал без перезагрузки страницы? В небольшом количестве гайдов показан такой пример. Но у меня он не работает так как надо! Помогите пожалуйста!

14
  • 1
    "Вот форма и скрипт." - где скрипт?
    – user176262
    22 фев 2016 в 2:43
  • Попробую побыть вангой, вы не отменяете submit формы, либо же вы повесили обработчик на click. Посмотрите документацию тут: api.jquery.com/submit
    – Vartlok
    22 фев 2016 в 7:04
  • @Vartlok, спасибо за ответ, посмотрите пожалуйста мой скрипт который добавил. при клике у меня забирает данные с textarea и передаёт в контроллер что в свою очередь возвращает мне объект. 22 фев 2016 в 10:26
  • Как рядом со словом ajax может быть фраза о презагрузке страницы? Похоже вам нужно на button повесить onclick = return fulse //////////// Чтобы форма не сабмиталась 22 фев 2016 в 10:26
  • @SergeEsmanovich вы это к тому что аякс и нужен для того чтобы всё работало без перегрузки страниц? если да. то я это знаю, но вот когда дошло дело до реализации - возникла данная проблема 22 фев 2016 в 10:29

2 ответа 2

1

Можно воспользоваться iframe:

<form action="..." method="post" target="my_iframe">
  <input type="submit" value="Go" />
</form>

<!-- тут будут результаты post -->
<iframe name="my_iframe" style="display:none;"></iframe>

Или с помощью AJAX, если у вас JQuery есть:

$('#submit').click(function() {
    $.ajax({
        url: 'processing_url',
        type:'POST',
        data: {
            form_field01: field01_value,
            form_field02: field02_value
            ...
        },
        success: function(msg) {
            alert('Posted');
        }               
    });
});
5
  • 1
    не учите плохому 22 фев 2016 в 10:24
  • Посмотрите пожалуйста скрипт что добавил. а то умельцы модераторы "пофиксили" мой пост что удалили AJAX скрипт. Но сейчас я его уже добавил! 22 фев 2016 в 10:27
  • "не учите плохому" - это вы про iframe? Чем он плох или хуже того же XmlHttpRequest, как транспорт для AJAX? Мне честно интересно, т.к. нет опыта негативного с ним.
    – Webaib
    22 фев 2016 в 10:35
  • Не вижу, что вы делаете с ответом 'success: function(msg) {}' и эта часть 'url: "/app/user/messages/${iddialog}",' в конце у вас в html реальный id и тут только как пример?
    – Webaib
    22 фев 2016 в 10:38
  • @webaib, если вы имеете ввиду ${iddialog} то это реальный html. обозначает id диалога. в контроллере обозначена эта переменная аннотацией @PathVariable 22 фев 2016 в 10:42
1

Здравствуйте. Если я Вас правильно понял, то при нажатии на кнопку отправляются данные и идет отправка данных, а Вам нужно, чтоб этого релода не было. Для этого добавьте в функцию нажатия клавиши return false;

$("#addMessage").click(function(e) {   
    //code here

    return false;
});
1
  • у автора стоит e.preventDefault(), этого должно быть дсотаточно 17 июн 2016 в 8:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.