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

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

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

http://www.ruanyifeng.com/blog/2009/05/data_types_and_json.html

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

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" onclick="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 {

    }
}

工程结构图：

原文链接：https://www.f2er.com/ajax/166109.html

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

猜你在找的Ajax相关文章