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

最新推荐文章于 2023-12-07 17:37:14 发布

lovelife200925

最新推荐文章于 2023-12-07 17:37:14 发布

阅读量601

点赞数

本文链接：https://blog.csdn.net/lovelife200925/article/details/26639023

版权

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

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

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" ο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 {

    }
}

工程结构图：

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

lovelife200925

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
easyui ajax方式与后台servlet交互原理

参考地址：http://www.verydemo.com/demo_c107_i19258.htmleasyui ajax方式与后台servlet交互原理easyui ajax是以json数据方式来与后台进行交互的。阮一峰有篇博客对json数据格式总结的非常好：http://www.ruanyifeng.com/blog/2009/05/data_types_and_json.
复制链接

扫一扫