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

【问题标题】：Ajax post form to servlet without refreshAjax 将表单发布到 servlet 而不刷新
【发布时间】：2012-03-15 18:17:54
【问题描述】：

我知道这个问题已经被问死了，所以我会提前道歉，但我就是不明白。我想做的是某种评分系统，虽然我在其他网站的教程中查看了几个示例，但它们都有些臃肿，并不是我真正想要的。

我需要在选择单选按钮时提交表单。单选按钮代表一些我需要使用服务器端的数字，因为我需要用这个值更新数据库等。之后我需要将更新的数据库值返回到 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，带有 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>

在我的 doPost 方法中的我的测试 servlet 中

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") 获取数据

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

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

data {itemID : rel },

【问题讨论】：

标签： jquery ajax forms jsp refresh

【解决方案1】：

您可以简单地为单选按钮使用 .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。数据将包含当前选择的单选按钮。

那么您所要做的就是在您的后端处理请求并根据所选内容更新行。

【讨论】：

有没有办法将数据直接发送到 servlet ？还是我需要使用一些辅助脚本来处理数据并将其发送到 servlet，然后让 servlet 响应辅助脚本，辅助脚本响应页面？希望这是有道理的
您不是在尝试将设置保存在某种数据库中吗？如果是这样，那么如果您使用 php，只需制作一个您将请求发送到的 PHP 文件，然后将数据保存在那里。但是你所说的 servlet 是什么意思，我认为你的意思是后端脚本 :)
我正在使用 jsp/java。 servlet 具有 doGet 和 doPost 等方法，它们将 HttpServletRequest 和 HttpServletResponse 作为参数。所以在这个 servlet 中，我想使用 request.getAttribute("name of object passing by post") 来获取值，然后更新数据库。然后，我将获取新的数据库值并使用调度程序或 response.sendRedirect() 或其他东西将其传递回 ajax 函数。我以前从未使用过任何 JQuery，而且我对 php 也同样陌生，所以如果可以避免使用 php 脚本，我想朝那个方向前进
如果你可以让你的Java程序监听http协议的端口。然后您可以将 ajax 发送到“IP:PORT”，然后在 Java 中捕获请求。不确定是否可以在 http 协议上监听，但试一试 :) 如果它似乎不起作用，请尝试查看 node.js - 这样你就可以有一个 serverice JavaScript 监听器等待请求。一旦得到它，它就可以将它发送到您的 Java 应用程序中。

【解决方案2】：

我只需要能够将表单数据发送到 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/

【讨论】：

从风格的角度来看，我有点希望避免使用提交按钮。如果我有一个名为 Rating.java 的 servlet，它在 /Rating 的 web.xml 文件中有一个 url 模式，那么 post 调用中的“/”是否只是更改为 /Rating？并且是 request.getAttribute("data") 检索到的数据的值； ?谢谢
看看这个小提琴jsfiddle.net/VMgxY/3 这使用了更改事件处理程序，是的，将/ 替换为Rating.java 或您指定的任何路径...数据部分我可以得到它
试用了您的代码，但无法正常工作。我更新了关于它的主要帖子。也许你可以帮忙。谢谢

【解决方案3】：

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

【讨论】：