Ajax發佈到servlet而不刷新

我知道這個問題已經完成，所以我會提前道歉，但我只是沒有得到它。我期望做的是某種評級系統，雖然我在其他站點的教程中查看了幾個示例，但它們都有點臃腫，而不是我真正想要的。Ajax發佈到servlet而不刷新

我需要在選擇單選按鈕時提交表單。單選按鈕表示一些我需要使用服務器端的號碼，因爲我需要使用此值更新數據庫等。我之後需要的是將更新後的數據庫值返回給jsp並顯示此數字。

所有後端的東西真的不是問題。我所需要的只是能夠將表單數據發送到servlet並獲取更新的值，而無需重新加載頁面。如果可能的話，我還想使用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>

編輯：這個servlet我要發送的信息被命名爲與我的web.xml文件的URL模式/評級評級。我是否通過標準的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（「項目Id」）來檢索數據

我做了所有的週末最好的事情是安裝螢火蟲。這幾乎告訴我我失敗的地方，並讓我走上正軌。感謝回覆的人。

我最終使用的代碼是由danniehansenweb發佈，但我修復了一個簡單的錯誤。數據{}中的逗號不應該在那裏。代替移動它的右大括號外像

data {itemID : rel },

來源

2012-02-25 Predz

您可以簡單地使用單選按鈕的.click事件。

這樣的例子可以看likethis：

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。數據將包含當前選中的單選按鈕。

然後，您只需在後端處理請求並從所選內容更新行。

來源

2012-02-25 15:40:44 danniehansenweb

有沒有辦法直接發送數據到servlet？或者我是否需要使用一些輔助腳本來處理數據並將其發送到servlet，然後讓servlet響應輔助腳本並且輔助腳本響應回頁面？希望是有道理的 – Predz 2012-02-25 15:44:30

是不是你想要做的是將設置保存在某種數據庫？如果是這樣，那麼如果你使用PHP只是做一個PHP文件，你發送請求，然後保存在那裏的數據。但是，你是什麼意思的一個servlet，我以爲你的意思是後端腳本:) – danniehansenweb 2012-02-25 17:32:21

即時通訊使用jsp/java。該servlet具有像doGet和doPost這樣的方法，它們將HttpServletRequest和HttpServletResponse作爲參數。所以在這個servlet中，我想使用request.getAttribute（「通過post傳遞的對象的名稱」）來獲取值，然後更新數據庫。然後，我會獲得新的數據庫值，並使用調度程序或response.sendRedirect（）或其他方法將其傳遞迴ajax函數。我從來沒有使用任何JQuery之前，即時通訊同樣新的PHP，所以如果有可能避免PHP腳本我想朝這個方向 – Predz 2012-02-25 17:45:32

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

來源

2012-02-25 15:39:28 linuxeasy

所有我需要的是能夠將表單數據發送給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/

來源

2012-02-25 15:46:44 Rafay

從風格的角度來看，我有點希望避免使用提交按鈕。如果我有一個名爲Rating.java的servlet，它在/ Rating的web.xml文件中有一個url-pattern，那麼post調用中的「/」就會變成/ Rating？並且是由request.getAttribute（「data」）檢索到的數據的值; ？謝謝 – Predz 2012-02-25 15:55:41

看看這個小提琴http://jsfiddle.net/VMgxY/3/這使用了改變事件處理程序，並且是用'Rating.java'替換'/'或者你指定的路徑。。數據部分我可以得到它 – Rafay 2012-02-25 17:40:35

試過你的代碼，無法讓它工作。我更新了關於它的主要帖子。也許你可以幫忙。謝謝 – Predz 2012-02-25 18:41:19

Ajax發佈到servlet而不刷新

回答

相關問題