Ajax отправьте форму сервлету без обновления

Я понимаю, что этот вопрос был сделан до смерти, поэтому я заранее извинюсь, но я просто не понимаю. То, что я хочу сделать, - это какая-то система оценки, и хотя я смотрел на несколько примеров в учебных пособиях на других сайтах, они все немного раздуты и не совсем то, что мне нужно.

Мне нужно отправить форму, когда выбран переключатель. Переключатель представляет собой некоторое число, которое мне нужно использовать на стороне сервера, так как мне нужно обновить базы данных и т.д. с этим значением. После этого мне нужно, чтобы обновленное значение базы данных было возвращено в jsp и отображать это число.

Все бэкэнды на самом деле не проблема. Все, что мне нужно, - это возможность отправлять данные формы сервлету и получать обновленное значение без перезагрузки страницы. Я также хотел бы использовать postform действия, чтобы сделать это, если это возможно, но это не важно.

Перейти к редактированию 3

Возможно ли это без использования 200-строчного JQuery / Ajax-скрипта?

Я дошел до

$('#submit').click(function(){
$.ajax({
    url: '/Rating',
    type:'POST',
    data: {
        message: s
    },
    success: 
        function(msg){
            alert("Success");
            // ill want to do something with divs here later i.e a refresh or toggle
        }                   
    });
});

который я блестел из других тем на эту тему. Мне нужно, чтобы он работал с некоторыми основными формами HTML, такими как

<form action="/" id="rating" method="Post">
   <input type="radio" name="ra1" onclick="formaction">
   <input type="radio" name="ra1" onclick="formaction">
   <input type="radio" name="ra1" onclick="formaction">
   <input type="radio" name="ra1" onclick="formaction">
   <input type="radio" name="ra1" onclick="formaction">
</form>

Редактировать: сервлет, которому я хочу отправить информацию, называется Rating с URL-шаблоном /Rating в моем файле web.xml. Получу ли я информацию, передаваемую ему, с помощью стандартного вызова request.getAttribute(String value) и какое строковое значение я ищу? "сообщение" или "с"?

Буду признателен за любую помощь. Благодарю.

Редактировать 2: я настроил тестовую страницу, чтобы попытаться заставить эту работу Ajax работать. Используя решение 3nigma у меня есть

<html>
<head>
<script src="jquery-1.7.1.js"></script>
<script>
$(":radio").change(function(){

var formData = $("form").serialize();
console.log(formData);
$.post("/Test",{data:formData},function(val){
//val has the updated value that you will send from the servlet
//do something
});
});
</script>

</head>
<body>
<form action="/Test" id="rating" method="Post">
<input type="radio" name="ra1" />
<input type="radio" name="ra1" />
<input type="radio" name="ra1" />
<input type="radio" name="ra1" />
<input type="radio" name="ra1" />
</form>

</body>
</html>

внутри моего тестового сервлета в методе doPost у меня есть

request.getAttribute("formData");
request.getAttribute("data");
System.out.println("test");

когда я запускаю страницу jsp и выбираю переключатель, ничего не происходит. System.out.println() не выполняется, что заставляет меня думать, что он никогда не достигает сервлета. Кто-нибудь видит что-то, что я делаю неправильно?

Редактировать 3 Наконец-то все заработало. Я включу проблемы, которые у меня были, если кто-нибудь застрянет в одних и тех же местах.

При отправке сервлету с именем Rating, URL будет просто "Rating", а не "/Rating", как это может быть в web.xml.

Внутри метода doPost в сервлете используйте request.getParameter("itemID") для получения данных.

Лучшее, что я сделал за все выходные, это установил firebug. Это в значительной степени сказало мне, где я потерпел неудачу и поставило меня на правильный путь. Спасибо людям, которые ответили.

Код, который я использовал, был опубликован danniehansenweb, за исключением того, что я исправил простую ошибку. Запятая внутри данных { } не должна быть там. Вместо этого переместите его за пределы закрывающей фигурной скобки, как

data {itemID : rel },
Источник

3 ответа

Решение

Вы можете просто использовать событие.click для переключателей.

Такой пример может выглядеть так:

HTML

   <input class="doAction" type="radio" name="ra1" rel="1" />
   <input class="doAction" type="radio" name="ra1" rel="2" />
   <input class="doAction" type="radio" name="ra1" rel="3" />
   <input class="doAction" type="radio" name="ra1" rel="4" />
   <input class="doAction" type="radio" name="ra1" rel="5" />

JavaScript

$(document).ready(function () {
    $('.doAction').click(function () {
        var rel = parseInt($('.doAction:checked').attr('rel'));

        $.ajax({
            type: 'POST',
            dataType: 'json',
            cache: false,
            data: {
                itemID: rel
            }
            url: '/ajax.php',
            success: function (data) {
                if(!data.answer) {
                    alert('Error');
                }
            }
        });
    });
});

Это даст каждому переключателю уникальный идентификатор, установленный в атрибуте rel. Затем при нажатии переключателя отправляется запрос ajax в ajax.php как POST. Данные будут содержать то, какая радио-кнопка в настоящее время выбрана.

Затем все, что вам нужно сделать, - это обработать запрос в вашей серверной части и обновить строки из того, что выбрано.

Источник

Все, что мне нужно, - это возможность отправить данные формы сервлету и получить обновленное значение обратно.

удалить обработчики onclick

<form action="/" id="rating" method="Post">
   <input type="radio" name="ra1" />
   <input type="radio" name="ra1" />
   <input type="radio" name="ra1" />
   <input type="radio" name="ra1" />
   <input type="radio" name="ra1" />
   <input type="button" id="btn" value="submit"/>
</form>

сериализовать форму и отправить ее сервлету

$("#btn").click(function(){

var formData = $("form").serialize();
 $.post("/",{data:formData},function(val){
  //val has the updated value that you will send from the servlet
  //do something
  });
});

вот как сериализованные данные будут выглядеть как http://jsfiddle.net/VMgxY/

Источник 
<form action="/" id="rating" method="Post">
   <input type="radio" name="ra1" onclick="formaction()" value="1">
   <input type="radio" name="ra1" onclick="formaction()" value="2">
   <input type="radio" name="ra1" onclick="formaction()" value="3">
   <input type="radio" name="ra1" onclick="formaction()" value="4">
   <input type="radio" name="ra1" onclick="formaction()" value="5">
</form>

обратите внимание на изменение в добавлении () сформировать действие и значение атрибута, который будет дифференцировать каждое значение.

На каждом клике formaction() должен содержать ваш код AJAX.

function formaction()
{
     var rating =  $(this).val(); //This captures the radio button's value, which ever clicked
    $.ajax({
        url: '/Test',
        type:'POST',
        data: {
            message: rating
        },
        success: 
            function(msg){
                // msg is the response you got from the server!
                alert("Email Sent");
            }                   
        });
    });
}
Источник
Другие вопросы по тегам