在jQuery中發佈多選列表中的所有選擇項Ajax

我已經實現了一個網頁來測量使用不同算法的2個句子之間的相似性。當用戶只選擇一種算法時，以下代碼運行良好，我將simAlgorithm列表更改爲允許多個。但不幸的是我沒有發佈所有選定的項目。在jQuery中發佈多選列表中的所有選擇項Ajax

JSP代碼：

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link rel="stylesheet" href="style.css" type="text/css"> 




    <title>Text Similarity</title> 
    <style type="text/css"> 
    </style> 
    <script type="text/javascript" src="jQuery.js"></script> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
      $('#getSimilarity').click(function(){ 
       getSimilarities($('#firstSentence').val(),$('#secondSentence').val(), 
       $('#language').val(),$('#simAlgorithm').val(),$('#premethod').val()); 
      }); 


    }); 
     function getSimilarities(sen1, sen2 , lang, myAlgorithm,method) { 

      $.ajax({ 
       url : 'similarity.htm', 
       type: 'POST', 
       dataType: 'json', 
       data: "{\"sen1\":\"" + sen1 + "\",\"sen2\":\"" + sen2 + "\",\"lang\":\"" + lang + "\",\"myAlgorithm\":\"" + myAlgorithm + "\",\"method\":\"" + method + "\",}", 
       contentType: 'application/json; charset=utf-8', 
       mimeType: 'application/json', 


       success : function(data) { 

         var a=simAlgorithm.selectedIndex; 
         if(document.getElementById("language").value=='ARABIC'&&a>15) 
         alert("Sorry: This measure doesn't support Arabic language"); 
         else 
         { 
        table = "<table class='tableStyle'>" + 
         "<tr>" + 
         "<td> Algorithm </td>" + 
         "<td> Similarity </td>" + 
         "</tr>"; 

        for(i=0; i<data.length;i++){ 
         newRow = "<tr>" + 
          "<td class='algorithm' desc='"+ data[i].description+"'>" + 
          data[i].name+ "</td>" + 
          "<td>" + data[i].res+ "</td>" + 
          "</tr>"; 
         table = table + newRow; 
        } 
        table = table + 
         "</table>"; 
        $("#result").html(table); 

        $('.algorithm').hover(function(){ 
         var title = $(this).attr('desc'); 
         $('<p class="tooltip"></p>') 
         .text(title) 
         .appendTo('body') 
         .fadeIn('slow'); 
        }, function() { 
         $('.tooltip').remove(); 
        }).mousemove(function(e) { 
         var mousex = e.pageX + 20; //Get X coordinates 
         var mousey = e.pageY + 10; //Get Y coordinates 
         $('.tooltip') 
         .css({ top: mousey, left: mousex }); 
        }); 

       }}, 
       error: function(){ 
        alert("Error"); 
       } 
      }); 


     } 
    </script> 
</head> 

<body> 
    <div align="center"> 
    ${message} <br> 
    <label> Sentence 1:</label> 
    <textarea id="firstSentence" rows="3" cols="100"></textarea> 
    <br> 
    <br> 
    <label> Sentence 2:</label> 
    <textarea id="secondSentence" rows="3" cols="100"></textarea> 
    <br> 
    <br> 
    <lable> Language: </lable> 
    <select id="language" size="1"> 
     <option> ENGLISH</option> 
     <option> ARABIC</option> 
    </select> 

    <br> 
    <br> 
    </div> 

    &nbsp;&nbsp;&nbsp;&nbsp; 
    <lable> Preprocessing Method: </lable> 
    <select id="premethod" size="1"> 
     <option> RAW</option> 
     <option> STOP</option> 
     <option> STEM</option> 
     <option> STOPSTEM</option> 
    </select> 
    <br> 
    <br> 
    <lable> Measure: </lable> 
    <select id="simAlgorithm" size="1" multiple="multiple"> 
     <option> EuclideanDistance</option> 
     <option> Levenshtein</option> 
     <option> MongeElkan</option> 
     <option> NeedlemanWunch</option> 
     <option> QGramsDistance</option> 
     <option> SmithWaterman</option> 
     <option> BlockDistance</option> 
     <option> CosineSimilarity</option> 
     <option> DiceSimilarity</option> 
     <option> JaccardSimilarity</option> 
     <option> Jaro</option> 
     <option> JaroWinkler</option> 
     <option> MatchingCoefficient</option> 
     <option> OverlapCoefficient</option> 
     <option> DISCOFirstOrderSimilarity</option> 
     <option> DISCOSecondOrderSimilarity</option> 
     <option> LSA</option> 
     <option> LDA</option> 
     <option> Greedy</option> 
     <option> LeskTanim</option> 
     <option> LIN</option> 
     <option> HSO</option> 
     <option> JCN</option> 
     <option> LCH</option> 
     <option> PATH</option> 
     <option> RES</option> 
     <option> WUP</option> 
    </select> 
    <br> 
    <br> 
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    <input type="submit" value="Get Similarity" id="getSimilarity"/> 
    <br> <br> 
    <div id="result"> </div> 
    <br><br> 
</div> 


</body>

Java代碼：

@RequestMapping(value = "/similarity", method = RequestMethod.POST) 
public @ResponseBody 
String getSimilarity(@RequestBody String data) throws IOException, ParseException { 

    JSONParser jsonp = new JSONParser(); 
    JSONObject jsono = (JSONObject)jsonp.parse(data); 
    JSONArray result = new JSONArray(); 

     JSONObject simlarity = new JSONObject(); 
     simlarity.put("name", (String)jsono.get("myAlgorithm")); 
     simlarity.put("description", (String)jsono.get("myAlgorithm")); 

      AnswerGrading answerGrading = new AnswerGrading(); 
      Function evFunction = new Function(); 
      evFunction.setFunctionOperator(FunctionOperator.SUM); 
      // evFunction.setMode(PreprocessingMethodMode.STEM); 
      evFunction.setMode(PreprocessingMethodMode.valueOf((String)jsono.get("method"))); 
      evFunction.addAlgorithm(Algorithms.valueOf((String)jsono.get("myAlgorithm")), 1.0); 
      answerGrading.setEvaluationFunction(evFunction); 

      double r = answerGrading.sentenceSimilarty((String)jsono.get("sen1"), (String)jsono.get("sen2"), 
        Language.valueOf((String) jsono.get("lang"))); 
      simlarity.put("res",r); 

     result.add(simlarity); 

    return result.toJSONString(); 
}

}

來源

2014-11-21 user1749847

由於該函數中的變量myAlgorithm是一個數組，我建議重寫下面一行; jQuery將負責爲客戶端的ajax調用創建必要的查詢字符串。變化：

data: "{\"sen1\":\"" + sen1 + "\",\"sen2\":\"" + sen2 + "\",\"lang\":\"" + lang + "\",\"myAlgorithm\":\"" + myAlgorithm + "\",\"method\":\"" + method + "\",}",

要：

data: { 
     sen1: sen1, 
     sen2: sen2, 
     lang: lang, 
     myAlgorithm: myAlgorithm, 
     method: method 
},

現在，在服務器端，你就必須更新你的代碼，以期望和操縱從myAlgorithm參數數組。

UPDATE

現在你發送一個 'JSON' 字符串到服務器，並NOT參數/值對，所有你必須在字符串中改變的是：

myAlgorithm

要：

JSON.stringify(myAlgorithm)

並希望應該發送的字符串WH所有選定值你已經在處理了。新的字符串應該是：

data: "{\"sen1\":\"" + sen1 + "\",\"sen2\":\"" + sen2 + "\",\"lang\":\"" + lang + "\",\"myAlgorithm\":\"" + JSON.stringify(myAlgorithm) + "\",\"method\":\"" + method + "\",}",

來源

2014-11-21 14:34:05 PeterKA

可以請您解釋如何接收並將選定的項目保存到服務器端的新陣列中？ – user1749847 2014-11-21 15:19:24

我已更新我的代碼;我沒有仔細看看你的服務器端代碼。讓我們知道。 – PeterKA 2014-11-21 15:27:51

我在服務器端的這一行使用myAlgorithm： evFunction.addAlgorithm（Algorithms.valueOf（（String）jsono.get（「myAlgorithm」）），1.0）; 我如何更新它（例如）選擇索引號0，然後我將編寫一個循環來處理所有項目。 – user1749847 2014-11-21 15:56:24

在jQuery中發佈多選列表中的所有選擇項Ajax

回答

相關問題