一、创建一个JavaWEBProject

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

 package com.czj.ajax;

 import java.io.IOException;

 import java.io.PrintWriter;

 import java.util.HashMap;

 import java.util.Map;

 import javax.servlet.ServletException;

 import javax.servlet.http.HttpServlet;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 public class AJAXServlet extends HttpServlet {

     public void doGet(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

     }

     public void doPost(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         boolean flag = false;

         System.out.println(request.getParameter("userName"));

         if("陈泽俊".equals(request.getParameter("userName")))

             flag = true;//登陆成功标志

         System.out.println(request.getParameter("password"));

         response.setContentType("text/html;charset=utf-8");

         PrintWriter out = response.getWriter();

         Map<String, Object> map = new HashMap<String, Object>();

         map.put("userName","陈泽俊");

         map.put("password", "123456");

         map.put("flag", flag);//登陆失败

         out.print(MyJson.objectToJson(map));//返回登录信息

         out.flush();

         out.close();

     }

 }

　　上面的32行有一个MyJson的类，其代码如下：

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

 package com.czj.ajax;

 import net.sf.json.JSONArray;

 public class MyJson {

       public static String objectToJson(Object resultobj){

             if (resultobj != null) {

                 JSONArray obj = JSONArray.fromObject(resultobj);

                 return (obj.toString());

             }

             return "";

       }

 }

三、写相应的jsp页面

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 <%

 String path = request.getContextPath();

 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

 %>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

   <head>

     <script type="text/javascript" src="Jscript/jquery-3.1.1.min.js"></script>

     <script type="text/javascript">

        $(document).ready(function(){

           $("button").click(function(){

               $.ajax({

                   type:"post",//提交方式

                   url:"${pageContext.request.contextPath}/servlet/AJAXServlet.do",

                   data:{

                       userName:  $("#userName").val()    ,

                       password:  $("#password").val()

                   },              //data中的类容会自动的添加到url后面

                   dataType: "json", //1、text 2、jsonscript 3、html 4、xml 5、String

                   success:function(data){      //这个function里面的参数可以随便写

                        if(data[0].flag == true){

                           alert("登陆成功！");

                       }else{

                           alert("登陆失败！");

                       }

                   }

               });

           });

       });

   </script>

   </head>

   <body>

       <div>

           <div>

               <ul>

                   <li>用户名：</li>

                   <li><input id="userName" name="userName" type="text" /></li>

               </ul>

           </div>

           <div>

               <ul>

                   <li>密码：</li>

                   <li><input id="password" name="password" type="password"/></li>

               </ul>

           </div>

           <div>

               <ul>

                   <li><button>登陆</button></li>

               </ul>

           </div>

       </div>

   </body>

 </html>

2、jQuery的Ajax简单示例的更多相关文章

  1. C# .net Jquery ajax 简单示例

    jquery中ajax相信大家都不陌生,这里只写个简单例子示意用法,详细后续再写. 在html中按钮事件中添加如下js var param = "data=" + escape($ ...

  2. asp.net MVC3 + JQuery 的ajax简单使用

    一直都没有使用过JQuery,更没使用过JQuery的ajax支持带来的方便,今天试了一下,真是减少了很多工作量,使用方法也比较简单 这里先记下来,以后使用时可以再拿着用. 本应用中,本来是准备使用长 ...

  3. jquery datatable使用简单示例

    目标: 使用 jQuery Datatable 构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求.同时, jQuery Datatable 强大的功能支持:排序,分页,搜索等. Query ...

  4. jquery函数$.proxy简单示例

    来自于<jquery 权威指南> ------------------------------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  5. jQuery瀑布流简单示例

    1,以下demo是基于window的滚动  

  6. AJAX小示例

    一. 基本内容 定义:AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步的Javascript和XML",即使用Javascript语言 ...

  7. jQuery简单的Ajax调用示例

    jQuery确实方便,下面做个简单的Ajax调用: 建立一个简单的html文件: <!DOCTYPE HTML> <html> <head> <script ...

  8. 如何构建ASP.NET MVC4&JQuery&AJax&JSon示例

    背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...

  9. 关于Ajax实现的简单示例

    一.代码示例 关于Ajax的基本概念(包括XMLHttpRequest对象及其相关方法属性)移步这里(w3school中文版)学习了解. <!doctype html> <html ...

随机推荐

  1. Swift构造

    构造就是将结构体.类或枚举的实例准备好以便使用的过程.这个过程包括: (1)为实例中的每个存储属性设置初始值. (2)执行必要的准备和初始化工作. 实例的构造过程是通过构造器来完成的. 可以在结构体. ...

  2. WPF软件开发系统之五——展会展厅触摸屏企业产品宣传展示系统

    本系统开发背景:上海展会多点触摸大屏(60寸以上)上互动展示. 功能包括:企业背景.产品.合作伙伴.所获荣誉等以图片.文字.视频多媒体的方式呈块状显示,亮点功能为支持多点操作去旋转.缩放.拖拽呈现各种 ...

  3. 作业2：分布式版本控制系统Git的安装与使用

    1.下载安装配置用户名和邮箱. 2. 创建工作目录并通过git init命令把这个目录变成Git可以管理的仓库. 3. 在工作目录下准备文本文件,建议下载Notepad++代替记事本. 4. 组合用g ...

  4. Redis报错 Server started, Redis version 3.2.13 Can't handle RDB format version 9 Fatal error loading the DB: Invalid argument. Exiting.

    在/usr/local/etc 目录下 运行 redis-server 命令重启 redis 服务发现报错,报错信息如下: 如上报错的含义是:当前的redis的版本是3.2.13版本,无法处理 ver ...

  5. Windows API方式直接调用C#的DLL，支持多音字转拼音、Gzip解压缩、公式计算（VBA、C++、VB、Delphi甚至java都可以）

    原始链接 https://www.cnblogs.com/Charltsing/p/DllExport.html 这两年,我在VBA应用方面一直有几大痛点:1.多音字转拼音:2.64位下的GZIP解压 ...

  6. 我的工具：Ping工具

    C# Ping工具 通过该工具可以多个地点Ping服务器以检测服务器响应速度,同时也可以测试网站的响应速度,解析时间,服务器连接时间,下载速度 工具下载地址:https://download.csdn ...

  7. vue前端开发。。。

    1. 官网下载 https://nodejs.org/en/ 2. 安装cnpm   在命令行:  npm install -g cnpm --registry=https://registry.np ...

  8. js获取元素宽高、位置相关知识汇总

    常见clientWidth.clientHeight.offsetWidth.offsetLeft,clientX.scrollTop等词语,比较混乱,现在总结下他们的区别. 1. clientWid ...

  9. centos下安装nginx并部署angular应用

    注意:直接yum安装的nginx有问题,不能直接安装,因为centos默认库里面没有nginx.如果安装过程中出现一些文件夹或者文件找不到的话,应该是你的nginx的版本没有安装对.最效率的办法是删除 ...

  10. 巧妙使用excel 实现行转列

    1. 本来想通过写sql的方式来实现简单的行转列 但是 时间要求很紧 (主要是自己懒 并且sql写的不好. ) 通过同事提醒 以及百度 找到一个很简单的方法,通过excel 来实现. 2. 具体操作步 ...