在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

回答

相关问题