easyui ajax方式与后台servlet交互原理

àì夳堔傛蜴生んèń 2022-01-05 03:39 223阅读 0赞

easyui ajax是以json数据方式来与后台进行交互的。

阮一峰有篇博客对json数据格式总结的非常好：

[http://www.ruanyifeng.com/blog/2009/05/data\_types\_and\_json.html][http_www.ruanyifeng.com_blog_2009_05_data_types_and_json.html]

**工程要用到easyui的jar包，可以在我的资源里下载，免费的。**

**[http://download.csdn.net/detail/shfqbluestone/5759579][http_download.csdn.net_detail_shfqbluestone_5759579]**

前端index.jsp的代码：

<%@ page language="java"  pageEncoding="UTF-8"%>
    <%
        String path = request.getContextPath();
    
    %>
    
    <html>
      <head>
        <title></title>
        <script type="text/javascript" src="<%=path%>/js/jquery-easyui-1.3.2/jquery-1.8.0.min.js" ></script>
        <script type="text/javascript" src="<%=path%>/js/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
    
        <script type="text/javascript">
            function loginIt(){
                var params = $('#LoginForm').serialize(); //序列化表单的值
                
                alert("params:" + params);
                $.ajax({
                    type: "post",
                    url: "MyServlet",
                dataType: "json",
                        data: params,
                    success: function(data){
                        alert(data.code);
    
    
                    }
                });
            }
        </script>
      </head>
      <body>
        <form name="LoginForm" id="LoginForm" action="" method="post">
            <div class="bdyy">
                用户名： <input type="text" name="username" id="username"   />
            </div>
             <div class="bdyy">
                登录密码： <input type="password" name="password" id="password"   />
    
            <div class="bu_d">
                <input type="button" name="button" id="button" οnclick="loginIt();" value="提交"/>
                       
            </div>
        </form>
      </body>
    </html>

配置文件web.xml:

<?xml version="1.0" encoding="UTF-8"?>
    <web-app version="2.5" 
    	xmlns="http://java.sun.com/xml/ns/javaee" 
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    	
    	<display-name>s2sh</display-name>
    
    
        <servlet>
            <servlet-name>MyServlet</servlet-name>
            <servlet-class>
                MyServlet
            </servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>MyServlet</servlet-name>
            <url-pattern>/MyServlet</url-pattern>
        </servlet-mapping>
    </web-app>

后台servlet MyServlet类的代码：

import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import java.io.BufferedReader;
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.Map;
    
    public class MyServlet extends HttpServlet {
        public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException {
            response.setContentType("text/html;charset=gbk");
            
           Map map = request.getParameterMap();
           String[] names = (String[])map.get("username");
           String[] passwords = (String[])map.get("password");
           System.out.println(names[0]);
           System.out.println(passwords[0]);
           
           String username = request.getParameter("username");
           System.out.println(username);
           
           response.setContentType("application/x-json");// 需要设置ContentType为"application/x-json"
           try {
    		PrintWriter out = response.getWriter();
    		String json = "{\"city\" : \"Beijing\", \"code\" : \"010\"}";
    		out.println(json);// 向客户端输出JSONObject字符串
            out.flush();
            out.close();
    	} catch (IOException e) {
    		// TODO Auto-generated catch block
    		e.printStackTrace();
    	}
    
            
        }
        
        public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException {
           this.doGet(request, response);
    
            
        }
     
        public void init() throws ServletException {
    
        }
    }

工程结构图：

![20130715214243906][]

[http_www.ruanyifeng.com_blog_2009_05_data_types_and_json.html]: http://www.ruanyifeng.com/blog/2009/05/data_types_and_json.html
[http_download.csdn.net_detail_shfqbluestone_5759579]: http://download.csdn.net/detail/shfqbluestone/5759579
[20130715214243906]: /images/20211230/34db078a050a46d682c6b78cf259dc95.png