Ajax отправьте форму сервлету без обновления - PullRequest
0 голосов
/ 25 февраля 2012

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

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

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

Пропустить для редактирования 3

Isэто возможно без использования 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) и какое строковое значение я ищу?"message" или "s"?

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

Редактировать 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 ]

1 голос
/ 25 февраля 2012

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

удалить обработчики 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>

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

$("#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/

0 голосов
/ 25 февраля 2012

Вы можете просто использовать событие .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.Данные будут содержать информацию о том, какая радиокнопка выбрана в данный момент.

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

0 голосов
/ 25 февраля 2012
<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");
            }                   
        });
    });
}
...