Question

我知道这个问题已经完成，所以我会事先道歉，但我只是没有得到它。我想要做的是某种评级系统，虽然我在其他网站的教程中看了几个例子，但它们都有点臃肿，而不是我真正想要的。

我需要在选择单选按钮时提交表单。单选按钮代表我需要使用服务器端的一些数字，因为我需要使用此值更新数据库等。之后我需要的是将更新的数据库值返回给jsp并显示这个数字。

所有后端的东西都不是问题。我需要的是能够将表单数据发送到servlet并获取更新的值而无需重新加载页面。如果可能，我还想使用post form操作来执行此操作，但这并不重要。

跳过编辑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>

编辑：我想要发送信息的servlet在我的web.xml文件中名为Rating with url-pattern / Rating。我是否通过标准的request.getAttribute（String value）调用获取传递给它的信息以及我要查找的字符串值？ “消息”或“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>

在我的测试servlet里面的doPost方法

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

当我运行jsp页面并选择一个单选按钮时，似乎没有任何事情发生。 System.out.println（）没有被执行，这使我认为它永远不会到达servlet。任何人看到我做错了什么？

编辑3 终于搞定了。我会把问题包括在任何人被困在某些相同的地方。

当发送到名为Rating的servlet时，url只是“Rating”而不是“/ Rating”，因为它可能在web.xml中。

在Servlet中的doPost方法内，使用request.getParameter（“itemID”）来检索数据

我整个周末做的最好的事情就是安装萤火虫。这几乎告诉我我失败的地方并让我走上正轨。感谢回复的人。

我最终使用的代码是由danniehansenweb发布的，除了我修复了一个简单的错误。数据{}中的逗号不应该存在。而是将其移动到结束花括号之外，如

data {itemID : rel },

Answer 1

我只需要能够将表单数据发送到servlet并获取更新后的值

删除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>

序列化表单并将其发送到servlet

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

Answer 2

<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");
            }                   
        });
    });
}

Answer 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属性中设置的唯一ID。然后，当单击单选按钮时，将ajax请求作为POST发送到ajax.php。数据将包含当前选择的单选按钮。

然后你需要做的只是在你的后端处理请求并从选择的内容中更新行。

Ajax将表单发布到servlet而不刷新

3 个答案: