用jQuery和Json实现Ajax异步请求

这里有两个例子,一个是关于登录验证的,一个是异步加载数据的

1、regist.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>
    <base href="<%=basePath%>">

    <title>My JSP ‘regist.jsp‘ starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#username").blur(function(){
                $.ajax({
                    url:"checkUsername",
                    data:{"name":$("#username").val()},
                    success:function(data){
                        //alert(data);
                        var src = eval("("+data+")");
                        $("#sty").html(src.msg);
                    }
                });
            });

            $(":button").click(function(){
                $.ajax({
                    url:"findAll",
                    success:function(data){
                        $("tr").remove("tr:not(:eq(0))");
                        //alert(data);
                        var src = eval("("+data+")");
                        var table = $("table");
                        for(var i=0;i<src.length;i++){
                            //alert(src[i].name);
                            var tr = $("<tr></tr>");
                            var cell1 = $("<td>"+src[i].name+"</td>");
                            var cell2 = $("<td>"+src[i].sex+"</td>");
                            var cell3 = $("<td>"+src[i].age+"</td>");
                            cell1.appendTo(tr);
                            cell2.appendTo(tr);
                            cell3.appendTo(tr);
                            tr.appendTo(table);
                        }
                    }
                });
            });

        });
    </script>

  </head>

  <body>
    <form action="registAction">
        用户名:<input type="text" name="username" id="username"/><span id="sty"></span><br/>
        密码:<input type="password" name="pwd" id="pwd"/><br/>
        <input type="submit" value="注册"/>
    </form>
    <input type="button" value="查看全部"/><br/>
    <table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
    </table>
  </body>
</html>

2、导入JSON的必须包

3、CheckUsername.java

package com.cn.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

public class CheckUsername extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        this.doPost(request, response);

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

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

        String username = request.getParameter("name");

        /*
         * json格式
         * {"name":"jack","age":"18"}
         */
        //String msg = "";

        //创建json对象
        JSONObject job = new JSONObject();

        if(username.equals("jack")){
            //msg = "{\"msg\":\"当前用户已存在不可注册\"}";
            job.put("msg", "当前用户已存在不可注册");
        }else{
            //msg = "{\"msg\":\"当前用户可注册\"}";
            job.put("msg", "当前用户可注册");
        }

        //out.print(msg);
        out.print(job);
        out.flush();
        out.close();
    }

}

4、User.java

package com.cn.pojo;

public class User {

    private String name;
    private String sex;
    private int age;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getSex() {
        return sex;
    }
    public void setSex(String sex) {
        this.sex = sex;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
    public User() {
        super();
        // TODO Auto-generated constructor stub
    }
    public User(String name, String sex, int age) {
        super();
        this.name = name;
        this.sex = sex;
        this.age = age;
    }
}

5、FindAll.java

package com.cn.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class FindAll extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        this.doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

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

        //json数组
        //[{"name":"jack","sex":"男","age":"18"},{"name":"lily","sex":"女","age":"17"},{"name":"tom","sex":"男","age":"18"}]

        //json对象
        JSONObject obj1 = new JSONObject();
        obj1.put("name", "jack");
        obj1.put("sex", "男");
        obj1.put("age", "18");

        JSONObject obj2 = new JSONObject();
        obj2.put("name", "lily");
        obj2.put("sex", "女");
        obj2.put("age", "17");

        JSONObject obj3 = new JSONObject();
        obj3.put("name", "tom");
        obj3.put("sex", "男");
        obj3.put("age", "18");

        //创建json数组
        JSONArray ja = new JSONArray();
        ja.add(obj1);
        ja.add(obj2);
        ja.add(obj3);

        out.print(ja);
        out.flush();
        out.close();
    }

}
时间: 2024-08-07 16:41:32

用jQuery和Json实现Ajax异步请求的相关文章

通过jquery的ajax异步请求接收返回json数据

jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: $('#send').click(function () { $.ajax({ type : "GET", url : "a.php", dataType : "jsonp", success : function (data) { $.

SpringMVC环境下实现的Ajax异步请求(JSON格式数据)

一 环境搭建 首先是常规的spring mvc环境搭建,不用多说,需要注意的是,这里需要引入jackson相关jar包,然后在spring配置文件"springmvc-servlet.xml"中添加json解析相关配置,我这里的完整代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schem

【Spring学习笔记-MVC-5】利用spring MVC框架,实现ajax异步请求以及json数据的返回

作者:ssslinppp      时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MVC与json参考文章:[spring学习笔记-mvc-3]返回json数据-方式1  和 [spring学习笔记-mvc-4]返回json数据-方式2. 使用到的技术主要如下: Ajax:使用JQuery 提供的ajax:==>需要引入jquery.min.js文件: Spring MVC: Jso

MVC&amp;WebFomr对照学习:ajax异步请求

写在前面:由于工作需要,本人刚接触asp.net mvc,虽然webform的项目干过几个.但是也不是很精通.抛开asp.net webform和asp.net mvc的各自优劣和诸多差异先不说.我认为虽然mvc和webform有诸多不同,但是也只是为了达到相同的目的而在各自的机制下采取了不同的手段而已.更何况它们都是基于asp.net框架的.因此在解决mvc开发过程中的问题时,我很容易联想到在webform下同样的问题是如何解决的.以此来作为对照.我姑且把这种方法叫做迁移学习法吧.我以"小孩之

ajax异步请求302

我们知道,只有请求成功ajax才会进行回调处理,具体状态码为 status >= 200 && status < 300 || status === 304; 这一点通过查看JQuery的源码就可以证实. // Cache response headers responseHeadersString = headers || ""; // Set readyState jqXHR.readyState = status > 0 ? 4 : 0; //

如何使用angularjs实现ajax异步请求

Sample.html <!DOCTYPE html> <html ng-app="myApp"> <head> <title>form</title> <script type="text/javascript" src="js/angular.min.js"></script> </head> <body> <form name=

MVC的Ajax异步请求

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 @using (Ajax.BeginForm("GetTime","order",new AjaxOptions()           {               Confirm="你确认这么做吗?",               HttpMethod="post",               OnSuccess

ajax异步请求302分析

1.前言 遇到这样一种情况,打开网页两个窗口a,b(都是已经登录授权的),在a页面中退出登录,然后在b页面执行增删改查,这个时候因为授权原因,b页面后端的请求肯定出现异常(对这个异常的处理,进行内部跳转处理),b页面中的ajax请求的回调中就会出现问题,今天遇到了,有种恍然大悟的感觉,打开以前公司的网站发现全都没做任何处理...... 没遇到过错误,永远不知道错误会什么时候出现. 2.问题:在ajax异步请求中,如果服务端出现内部跳转,如何在回调中处理 我们先来看这样一个简单的ajax异步请求

黑马eesy_15 Vue:vue语法和生命周期与ajax异步请求

自学Java后端开发,发现14 微服务电商[乐优商城]实战项目,在介绍完SpringCloud后就要肝前端基础知识ES6和Vue. 所以本篇入门Vue练习记录的过程,目的是供自学后端Java遇到Vue使用需求的时候加强一下Vue基本使用的能力. vue语法和生命周期与ajax异步请求 1.Vue的快速入门2.Vue的语法 插值表达式 事件的绑定 数据的显示 逻辑判断和循环输出3.Vue的生命周期 8个生命周期的执行点 4个基本的 4个特殊的4.axios的ajax异步请求 它和jquery的aj