我们先看一下js的原生ajax

直接进入代码，我们先准备好servlet,之后不会改动，所以先看一下。

package cn.curry.servlet;

import com.alibaba.fastjson.JSON;

import com.alibaba.fastjson.serializer.SerializerFeature;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.util.ArrayList;

import java.util.List;

/**

 * Created by Curry on 2017/3/16.

 */

public class RegisterServlet extends HttpServlet {

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

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

        if("admin".equals(name)){

            //打回浏览器  “已经注册”

            response.getWriter().write("Your Account Is Already Registered");

        }

        else{

            //可以注册

            response.getWriter().write("You Can Register This Account");

        }

    }

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

        doPost(request,response);

    }

}

很简单的servlet页面，然后我们看前台jsp展示页面，我写的是发送post，请求。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>注册</title>

    <script type="text/javascript">

        function checkUser(){

            var value=document.getElementById("username").value;

            var url="RegisterServlet";

            var xhr;

            if(window.XMLHttpRequest){

                //非IE浏览器 Chrome 等

                xhr=new XMLHttpRequest();

            }else{

                //IE

                xhr=new ActiveXObject("Microsoft.XMLHTTP");

            }

            xhr.open('post',url,true);

            xhr.onreadystatechange=function(){

                if(xhr.readyState==4&&xhr.status==200){

                    var content=xhr.responseText;

                    document.getElementById("msg").innerText=content;

                }

            }

            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

            xhr.send("name="+value);

        }

    </script>

</head>

<body>

    <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/>

    <input name="userpwd"/>

</body>

</html>

简单改一下就可以实现发送get请求。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>注册</title>

    <script type="text/javascript">

        function checkUser(){

            var value=document.getElementById("username").value;

            var url="RegisterServlet?name="+value;

            var xhr;

            if(window.XMLHttpRequest){

                //非IE浏览器 Chrome 等

                xhr=new XMLHttpRequest();

            }else{

                //IE

                xhr=new ActiveXObject("Microsoft.XMLHTTP");

            }

            xhr.open('get',url,true);

            xhr.onreadystatechange=function(){

                if(xhr.readyState==4&&xhr.status==200){

                    var content=xhr.responseText;

                    document.getElementById("msg").innerText=content;

                }

            }

            xhr.send(null);

        }

    </script>

</head>

<body>

    <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/>

    <input name="userpwd"/>

</body>

</html>

接下来看jQuery的，简单了很多。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>注册</title>

    <script type="text/javascript" src="jq/jQuery1.11.1.js"></script>

    <script type="text/javascript">

        function checkUser() {

            var value=document.getElementById("username").value;

            $.ajax({

                url : "RegisterServlet",

                type : "GET",

                data : "name="+value,

                dataType : "text",

                success : function(result){

                    document.getElementById("msg").innerText=result;

                },

                error:function () {

                    document.getElementById("msg").innerText=result;

                }

            });

        }

    </script>

</head>

<body>

    <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/>

    <input name="userpwd"/>

</body>

</html>

发送post请求直接把get改为post就可以了。这里就不做赘述了。

当然除了$.ajax jQuery还提供了$.get()，$.post(),$(select).load等方法。以上方法用法和$.ajax()语法并没有不同，是对$.ajax()的封装，但是$.ajax()更灵活，通常使用$.ajax()可以完成我们的开发。所以你懂得，以上略作了解就好。

使用jQuery发送ajax的更多相关文章

  1. jQuery发送ajax请求

    利用jquery发送ajax请求的几个模板代码. $.ajax({ async : false, type: 'POST', dataType : "json", url: &qu ...

  2. JQuery发送ajax请求不能用数组作为参数

    JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){        var select ...

  3. Jquery发送ajax请求以及datatype参数为text/JSON方式

    Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...

  4. IE9下JQuery发送ajax请求失效

    最近在做项目的时候,测试PC端网页,在IE9下会失效,不能正常的发送POST请求,经过仔细的排查,发现是IE9下JQuery发送ajax存在跨域问题. 目前有两种解决方案:   解决方案一: 设置浏览 ...

  5. 学习AJAX必知必会（4）~JQuery发送Ajax请求

    一.JQuery发送Ajax请求 ■ 对于get和post请求,jQuery内部封装了Ajax请求的4个步骤和数据格式的设置 ■ 对于Ajax通用请求,jQuery内部封装了Ajax请求的4个步骤和数 ...

  6. 关于解决JQuery发送Ajax请求后，IE缓存数据不更新的问题

    http://www.cnblogs.com/lys_013/archive/2013/08/07/3243435.html 今天在做ajax页面无刷新请求后台服务器数据的时候,IE下遭遇Ajax缓存 ...

  7. jQuery发送Ajax请求以及出现的问题

    普通jQuery的Ajax请求代码如下: $.ajax({ type: 'POST', url: "http://xxx/yyy/zzz/sendVerifyCode", data ...

  8. jquery发送ajax请求返回数据格式

    jquery向服务器发送一个ajax请求后,可以返回多种类型的数据格式,包括:html,xml,json,text等. 1.html格式的数据 "<div class='comment ...

  9. python测试开发django-50.jquery发送ajax请求(get)

    前言 有时候,我们希望点击页面上的某个按钮后,不刷新整个页面,给后台发送一个请求过去,请求到数据后填充到html上,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.Ajax可以完美的 ...

随机推荐

  1. 微信小程序再次升级：卖货小店小程序不用开发也能进行交易

    卖货小店小程序,不用开发一行代码也能帮商家实现交易功能,这个真是几家欢喜几家愁啊,对于开发小程序商城的公司来说,这个无疑是一个雷霆之际,第一反应就是,这下完了,小程序自身就支持交易,那还要我们这些第三 ...

  2. javascript 中的深复制 和 其实现方法

    首先,我们需要明白什么是深复制(侧重指对象方面)? 在javascript中,复制分为浅复制和深复制,个人理解,浅复制就是直接将引用复制,复制前后的两个对象指向同一个内存地址,对其中一个进行操作,另外 ...

  3. Hash表的实现

    #include "stdafx.h" #include <iostream> #include <exception> using namespace s ...

  4. 《精通Spring4.X企业应用开发实战》读后感第五章（方法注入）

  5. 数据库路由中间件MyCat - 源代码篇（5）

    此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 3. 连接模块 如之前所述,MyCat的连接分为前端和后端,下面是连接基本相关类图: 3.1 Closabl ...

  6. 用matplotlib画线

    1:matplotlib基础 Matplotlib 是一个 Python 的 2D绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形[1] . 通过 Matplotlib,开发者可以 ...

  7. Jsoncpp写“鱘”的json数据，报错。

    最近在用Json::FastWriter生成json数据时,发现一个问题.含有“鱘”字的json字段会多出一个斜杠,不知道是不是编码的问题. C++要使用JSON来解析数据,一般采用jsoncpp. ...

  8. Noip2016day1 玩具迷题toy

    题目描述 小南有一套可爱的玩具小人, 它们各有不同的职业. 有一天, 这些玩具小人把小南的眼镜藏了起来. 小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的面朝圈外.如下图: 这时singer告诉 ...

  9. 【微信小程序】开发实战 之 「数据缓存API」解析

    每个小程序都可以有自己的本地缓存,可以通过 数据缓存的API 实现对本地缓存进行 设置.获取和清理.本地缓存最大为10M.localStorage是永久存储的,但我们不建议将关键信息都放在localS ...

  10. [Swift]LeetCode1081. 不同字符的最小子序列 | Smallest Subsequence of Distinct Characters

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...