zoukankan      html  css  js  c++  java
  • 2、jQuery的Ajax简单示例

    一、创建一个JavaWEBProject

    二、创建一个Servlet(下面的例子中用到了Json--第32行,Json的作用是将一个Object类转换为特定格式的字符串,如果不用Json直接返回字符串也行)。

     1 package com.czj.ajax;
     2 
     3 import java.io.IOException;
     4 import java.io.PrintWriter;
     5 import java.util.HashMap;
     6 import java.util.Map;
     7 
     8 import javax.servlet.ServletException;
     9 import javax.servlet.http.HttpServlet;
    10 import javax.servlet.http.HttpServletRequest;
    11 import javax.servlet.http.HttpServletResponse;
    12 
    13 public class AJAXServlet extends HttpServlet {
    14     public void doGet(HttpServletRequest request, HttpServletResponse response)
    15             throws ServletException, IOException {
    16     }
    17 
    18     public void doPost(HttpServletRequest request, HttpServletResponse response)
    19             throws ServletException, IOException {
    20         boolean flag = false;
    21         System.out.println(request.getParameter("userName"));
    22         if("陈泽俊".equals(request.getParameter("userName"))) 
    23             flag = true;//登陆成功标志
    24         System.out.println(request.getParameter("password"));
    25         response.setContentType("text/html;charset=utf-8");
    26         PrintWriter out = response.getWriter();
    27         
    28         Map<String, Object> map = new HashMap<String, Object>();
    29         map.put("userName","陈泽俊");
    30         map.put("password", "123456");
    31         map.put("flag", flag);//登陆失败
    32         out.print(MyJson.objectToJson(map));//返回登录信息
    33         out.flush();
    34         out.close();
    35     }
    36 }

      上面的32行有一个MyJson的类,其代码如下:

      【注意】用Json的时候要先引入Json所需的基本jar包

     1 package com.czj.ajax;
     2 
     3 
     4 import net.sf.json.JSONArray;
     5 
     6 public class MyJson {
     7       public static String objectToJson(Object resultobj){
     8             if (resultobj != null) {
     9                 JSONArray obj = JSONArray.fromObject(resultobj);  
    10                 return (obj.toString());
    11             }
    12             return "";
    13       }                  
    14 }

    三、写相应的jsp页面

     1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
     2 <%
     3 String path = request.getContextPath();
     4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
     5 %>
     6 
     7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     8 <html>
     9   <head>
    10     <script type="text/javascript" src="Jscript/jquery-3.1.1.min.js"></script>
    11     <script type="text/javascript">
    12             
    13        $(document).ready(function(){
    14           $("button").click(function(){
    15               $.ajax({
    16                   type:"post",//提交方式
    17                   url:"${pageContext.request.contextPath}/servlet/AJAXServlet.do",
    18                   data:{
    19                       userName:  $("#userName").val()    ,
    20                       password:  $("#password").val()
    21                   },              //data中的类容会自动的添加到url后面
    22                   dataType: "json", //1、text 2、jsonscript 3、html 4、xml 5、String
    23                   success:function(data){      //这个function里面的参数可以随便写
    24                        if(data[0].flag == true){
    25                           alert("登陆成功!");
    26                       }else{
    27                           alert("登陆失败!");
    28                       } 
    29                   }
    30               });
    31           });
    32       }); 
    33   </script>
    34   </head>
    35   
    36   <body>
    37       <div>
    38           <div>
    39               <ul>
    40                   <li>用户名:</li>
    41                   <li><input id="userName" name="userName" type="text" /></li>
    42               </ul>
    43           </div>
    44           <div>
    45               <ul>
    46                   <li>密码:</li>
    47                   <li><input id="password" name="password" type="password"/></li>
    48               </ul>
    49           </div>
    50           <div>
    51               <ul>
    52                   <li><button>登陆</button></li>
    53               </ul>    
    54           </div>
    55       </div>
    56   </body>
    57 </html>
  • 相关阅读:
    react ts axios 配置跨域
    npm run eject“Remove untracked files, stash or commit any changes, and try again.”错误
    java 进程的参数和list的线程安全
    帆软报表 大屏列表跑马灯效果JS
    帆软报表 快速复用数据集,避免重复劳动
    分析云 OA中部门分级思路和实现方法
    分析云 分段器 只显示一个块的数据
    分析云 更改服务默认的端口号
    分析云U8项目配置方法新版本(2)
    Oracle 创建时间维度表并更新是否工作日字段
  • 原文地址:https://www.cnblogs.com/czj-zhm/p/6619207.html
Copyright © 2011-2022 走看看