加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-16 00:58:54 所属栏目:百科 来源:网络整理
导读:easyui ajax方式与后台servlet交互原理 easyui ajax是以json数据方式来与后台进行交互的。 阮一峰有篇博客对json数据格式总结的非常好: http://www.ruanyifeng.com/blog/2009/05/data_types_and_json.html 工程要用到easyui的jar包,可以在我的资源里下载,

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 {

    }
}

工程结构图:

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读