我们先看一下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. Poj1007_DNA Sorting(面向对象方法)

    一.Description One measure of ``unsortedness'' in a sequence is the number of pairs of entries that a ...

  2. Oracle查询24小时制的时间格式

    select to_date('2016-11-11 13:42:27', 'yyyy/mm/dd hh24:mi:ss') from dual.

  3. ambari快速安装hadoop

    资源下载http://www.cnblogs.com/bfmq/p/6027202.html 大家都知道hadoop包含很多的组件,虽然很多都是下载后解压简单配置下就可以用的,但是还是耐不住我是一个懒 ...

  4. VS2008 查找失效怎么办

    按Ctrl+F没有反应?   visual studio 里 查找替换 显示不出来;   还能用 让他查找个不存在的文本还会弹出找不到的提示; 就是看不到 查找替换的操作框了;   问题解决方法:   ...

  5. python3-----反射实例

    #/usr/bin/env python # -*- coding:utf-8 -*- import sys,os class WebServer(object): def __init__(self ...

  6. Al-Qaeda&nbsp;affiliate&nbsp;in&amp;…

    By Greg Miller, Updated: Friday, February 1, 4:13 AM New intelligence on al-Qaeda's affiliate in Nor ...

  7. 项目debug1

    QuestionController代码如下: @RequestMapping(value = "/question/{qid}", method = {RequestMethod ...

  8. Python 如何连接并操作 Aws 上 PB 级云数据仓库 Redshift

    Python 如何连接并操作 Aws 上 PB 级云数据仓库 Redshift 一.简介 Amazon Redshift 是一个快速.可扩展的数据仓库,可以简单.经济高效地分析数据仓库和数据湖中的所有 ...

  9. JS实现页面刷新方法

    下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象(用于框架) opener.loc ...

  10. C# System.Timers.Time

    System.Timers.Timer t = new System.Timers.Timer(5000); //设置时间间隔为5秒 private void Form1_Load(object se ...