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

来源：互联网发布：200左右的耳机推荐知乎编辑：程序博客网时间：2024/06/03 13:21

参考地址：http://www.verydemo.com/demo_c107_i19258.html

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

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

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

前端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 blocke.printStackTrace();}            }        public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException {       this.doGet(request, response);            }     public void init() throws ServletException {    }}

工程结构图：

明天还要上班，洗洗水鸟。过两天再完善吧

0 0