%从textbox获取值并使用JavaScript通过AJAX在jsp页面的textarea中显示时，无法显示（百分比）符号

Question

在我的jsp页面中，

<form id="indexForm" name="indexForm" action="LoginAction" method="post">
<table>
    <tr>
        <td id="fname" class="fontStyle">First Name :</td>
        <td id="fvalue"><input type="text" id="firstname"
            name="firstname" /></td>
        <td id="lname" class="fontStyle">Last Name :</td>
        <td id="lvalue"><input type="text" id="lastname" name="lastname" /></td>
    </tr>
        <tr>
        <td></td>
        <td>
        <center><!-- <input type="button" value="End Chat" onclick="getValues()" /> -->
        <a id="button" href="javascript:getValues();">Start chat</a></center>
        </td>
        <td>
        <center><!-- <input type="button" value="End Chat" /> --> <a
            id="button" href="javascript:logout();">Stop chat</a></center>
        </td>
        <td></td>
    </tr>

</table>

</form>

</div>
<div style="display: none;" id="div">
<div><textarea id="textarea" rows="10"></textarea></div>
<div>
<table>
    <tr>
        <td id="msg" class="fontStyle">message :</td>
        <td id="msgvalue"><input size="40" type="text" id="message" /></td>
        <td style="width: 5%;"></td>
        <td><!-- <input type="button" value="send" onclick="sendMessage()" /> -->
        <a id="button3" href="javascript:sendMessage();">Send</a></td>
    </tr>
</table>
</div>
</div>

在我的JavaScript中，

var message ;
var textarea ;

function sendMessage(){


    message = document.getElementById("message").value;
            textarea = document.getElementById("textarea");


    try
    {
        xmlhttp.onreadystatechange=function()
        {
            //alert("Status : "+xmlhttp.status+"\nreadyState : "+xmlhttp.readyState);
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var checkMsg = encodeURIComponent(xmlhttp.responseText.toString());
                if(checkMsg != "null" && checkMsg != null){
                    //document.getElementById("textarea").innerHTML +=  checkMsg;
                    if(textarea.value == "")
                        textarea.value = checkMsg;
                    else
                        textarea.value += "\n"+ checkMsg  ;
                }
            }
        };
        xmlhttp.open("POST","SendMessageAction?message="+encodeURIComponent(message)+"&sid"+Math.random(),true);
        xmlhttp.send();
    }
    catch(err)
    {
        alert(err.description);
    }
}

在我的servlet中，

package com.tps.flexchat.action;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.genesyslab.platform.webmedia.protocol.FlexChatProtocol;
import com.tps.flexchat.Request.SendMessage;
import com.tps.flexchat.info.ApplicationInfo;
import com.tps.flexchat.info.CustomerInfo;

public class SendMessageAction extends HttpServlet {
    private static final long serialVersionUID = 1L;

    private String msg;
    private String seckey;
    private String uid;
    private String sessionId;
    private int counter;
    private FlexChatProtocol protocol = null; 
    private SendMessage message;


    public SendMessageAction() {
    super();
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        PrintWriter out = response.getWriter();
        msg = request.getParameter("message");
        seckey = request.getParameter("securekey");
        uid = request.getParameter("userId");
        sessionId = request.getParameter("sessionId");
        //counter =Integer.parseInt(request.getParameter("counter"));
        counter = 1;
        protocol = ApplicationInfo.flexProtocol;

        message = new SendMessage();
        message.send(msg, seckey, uid, sessionId, counter, protocol);

        CustomerInfo customer = ApplicationInfo.customerDetails.get(uid);

        out.print(customer.getMessage());

    }

}

sesionId、userId、secureKey可以由genesys生成并正常工作...只有msg有问题...

在java类中，

package com.tps.flexchat.Request;

import com.genesyslab.platform.commons.protocol.ChannelState;
import com.genesyslab.platform.commons.protocol.Message;
import com.genesyslab.platform.commons.protocol.ProtocolException;
import com.genesyslab.platform.webmedia.protocol.FlexChatProtocol;
import com.genesyslab.platform.webmedia.protocol.flexchat.EventInfo;
import com.genesyslab.platform.webmedia.protocol.flexchat.MessageText;
import com.genesyslab.platform.webmedia.protocol.flexchat.TreatAs;
import com.genesyslab.platform.webmedia.protocol.flexchat.UserType;
import com.genesyslab.platform.webmedia.protocol.flexchat.events.EventStatus;
import com.genesyslab.platform.webmedia.protocol.flexchat.requests.RequestRefresh;
import com.tps.flexchat.info.ApplicationInfo;
import com.tps.flexchat.info.CustomerInfo;


public class SendMessage {
    int i = 0;
    public void send(String msg,String seckey, String uid, String sessionId, int counter, FlexChatProtocol protocol){
            CustomerInfo customer = ApplicationInfo.customerDetails.get(uid);
            RequestRefresh refresh = RequestRefresh.create();
            refresh.setMessageText(MessageText.create(null, TreatAs.NORMAL, msg));
            refresh.setFromPosition(customer.getFromPosition()+1);
            refresh.setSecureKey(seckey);
            refresh.setUserId(uid);

            try {
                if(protocol.getState() == ChannelState.Opened){
                    Message resp = protocol.request(refresh);
                    if(resp != null){
                        EventStatus status = (EventStatus)resp;
                        if(status.messageId() == EventStatus.ID){
                            String userId = status.getUserId();

                            if(status.getFlexTranscript() != null && status.getFlexTranscript().getEventInfoList() != null){
                                EventInfo info = (EventInfo) status.getFlexTranscript().getEventInfoList().getLast();

                                    if(customer != null){
                                        customer.setFromPosition(status.getFlexTranscript().getLastPosition());
                                        customer.addMessage(info.getText());
                                    }

                            }


                        }
                    }
                    //System.out.println(msg+";"+seckey+";"+uid+";"+sessionId+";"+counter);
                }else{
                    protocol.open();
                }
            } catch (ProtocolException e) {
                e.printStackTrace();
            } catch (IllegalStateException e) {
                e.printStackTrace();
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
    }
}

当我在文本字段中键入任何特殊字符，并按下发送按钮时，它将调用JavaScript中的sendMessage（），并在文本区域中显示除%符号以外的值。

除%符号外，所有特殊字符都在工作。

如何显示%符号？

Answer 1

解决办法是，

当使用AJAX将值发送到servlet时，我使用了编码器URIComponent（）和解码器（）而不是转义（）。

我的剧本是这样的，

var checkMsg = decodeURIComponent(xmlhttp.responseText.toString());
...

xmlhttp.open("POST","SendMessageAction?message=" + encodeURIComponent(message) 

感谢所有支持我的人。。。。

Answer 2

我可以看到您已经在转义消息，但看起来您还需要对消息进行URL编码然后解码。URL中使用符号来表示空格，因此任何实际符号都将被删除，除非您对它们进行编码（到“+”）。

在Javascript端，您可以使用codeURIComponent（）和decdeURIComponent（），在Java端使用URLDecoder和URLEncoder。

在您的Javascript中添加类似...

var checkMsg = decodeURIComponent(xmlhttp.responseText.toString());
...

xmlhttp.open("POST","SendMessageAction?message=" + encodeURIComponent(message)  +"&sid"+Math.random(),true);

...在发送/接收消息的Java代码中。。。

String inMessage = URLDecoder.decode(rawMessage, "UTF-8");
...
return URLEncoder.encoder(outMessage, "UTF-8");

Answer 3

首先不要使用escape（），而是使用encodeURIComponent（）。详见此。

message = encodeURIComponent(document.getElementById("message").value);

第二次设置中的值

textarea.value = textarea.value ? textarea.value + '\n' + checkMsg : checkMsg;

第三，当发出POST请求时，需要在requestHeader中设置内容类型：application/x-www-form-urlencoded。并使用xhr发送有效负载。发送（数据）而不是用查询字符串传递它。

xmlhttp.open("POST", "SendMessageAction?sid="+Math.random(), true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send("message=" + message);

所有这些加起来，假设您的响应是简单的（这不是用url编码的，这是不必要的！）

var messageEl = document.getElementById("message");
var textareaEl = document.getElementById("textarea");

function sendMessage(){

    var xhr = new XMLHttpRequest();
    xhr.onload = function(evt) {
        var checkMsg = xhr.responseText;
        if (textareaEl.value)
            textareaEl.value += '\n';
        textareaEl.value += checkMsg;
    };
    xhr.onerror = function(evt) {
        // handle the error.
    };
    xhr.open('POST', "SendMessageAction?sid="+Math.random(), true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send("message=" + encodeURIComponent(messageEL.value));
}

你的问题应该自己解决。