在JQuery Ajax中发布所有选中的多选列表项

时间:2014-11-21 14:20:03

标签: javascript jquery ajax json

我已经实现了一个网页来测量使用不同算法的2个句子之间的相似性。当用户只选择一个算法时,下面的代码工作正常,我改变了simAlg​​orithm列表以允许多个。但不幸的是我未能发布所有选定的项目。

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

}

1 个答案:

答案 0 :(得分:0)

由于函数中的变量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参数中的数组。

<强>更新

既然您要向服务器发送'JSON'字符串并且 NOT PARAMETER / VALUE PAIRS ,那么您必须在字符串中更改所有内容:

 myAlgorithm

要:

JSON.stringify( myAlgorithm )

希望这应该发送您已经处理的字符串中的所有选定值。新字符串将是:

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