jQuery_Ajax+Json

最新推荐文章于 2025-06-29 11:10:32 发布

原创最新推荐文章于 2025-06-29 11:10:32 发布 · 629 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jquery

javaweb 同时被 2 个专栏收录

37 篇文章

订阅专栏

前端

19 篇文章

订阅专栏

本文介绍了一个基于jQuery的前端聊天应用实现方案，通过Ajax技术向服务器发送用户消息，并使用JSON进行数据交互。文章详细展示了前端代码如何捕捉用户点击事件并发送消息至服务器，以及服务器端如何接收并处理这些消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端jQuery代码：

<script src="js/jquery-3.2.1.min.js">
    </script>
     <script>
    $(function(){  
         $("#sendmsg").on('click',function(){//用户点击Send Message按钮发送消息

            var c = $("#chatmsg").val();//取得用户输入的消息变量
            var jsonStr = [{'chatmsg':c}];

            $.ajax({//提交请求给msgServlet处理。
                type:"POST",
                url:"msgServlet",//在url中传参
                contentType:"application/x-www-form-urlencoded;charset=utf-8",
                dataType:"json",
                //data:"chatMsg="+c,
                data:{
                    'msg':JSON.stringify(jsonStr)
                },
                success:function(data){  
                     var chatArea = document.getElementById("chatArea") ;
                     chatArea.value = null ;
                     var msgList = data;
                     for ( var i=0; i<msgList.length; i++) {

                         if ( i == msgList.length-1) {
                             chatArea.value += msgList[i] ;
                         } else {
                             chatArea.value += msgList[i] + "\n" ;
                         }

                 }


            }  

        });
    });

    });
    </script>

MsgServlet.java

package servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import java.util.ArrayList;
import java.util.List;

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

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import com.bean.Message;

public class MsgServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        doPost(request, response) ;
    }

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


        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setHeader("cache-control", "no-cache");
        response.setContentType("application/json;utf-8");



        PrintWriter out = response.getWriter();
        HttpSession session=request.getSession();////取得session
        ServletContext application=request.getServletContext();//取得application


            String sender = (String)session.getAttribute("username");//发送者
            String msg = request.getParameter("chatMsg");   
            String jsonStr = request.getParameter("msg");
            JSONArray jsonArray = JSONArray.fromObject(jsonStr);
            JSONObject jsonObject;
            String content = null;
            for(int i=0;i<jsonArray.size();i++){
                jsonObject = jsonArray.getJSONObject(i); 
                content = (String)jsonObject.getString("chatmsg");
                System.out.println(content);
            }

            Message message = new Message(sender, content) ;
                //新建一个Message实例。如果消息列表msgList还未创建，则创建。
            if(application.getAttribute("msgList") == null){

                List<String> msgList = new ArrayList<String>();
                application.setAttribute("msgList", msgList);

            }
            List<String> msgList = (List<String>)application.getAttribute("msgList");//取得application中的消息列表
            msgList.add(message.toString());//将由发送者和消息实例的Message添加到消息列表中
//              out.write("success");
            JSONArray jsonarray = JSONArray.fromObject(msgList) ;
            out.print(jsonarray);


    }

}