使用jQuery发送ajax
我们先看一下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的更多相关文章
- jQuery发送ajax请求
利用jquery发送ajax请求的几个模板代码. $.ajax({ async : false, type: 'POST', dataType : "json", url: &qu ...
- JQuery发送ajax请求不能用数组作为参数
JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){ var select ...
- Jquery发送ajax请求以及datatype参数为text/JSON方式
Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...
- IE9下JQuery发送ajax请求失效
最近在做项目的时候,测试PC端网页,在IE9下会失效,不能正常的发送POST请求,经过仔细的排查,发现是IE9下JQuery发送ajax存在跨域问题. 目前有两种解决方案: 解决方案一: 设置浏览 ...
- 学习AJAX必知必会（4）~JQuery发送Ajax请求
一.JQuery发送Ajax请求 ■ 对于get和post请求,jQuery内部封装了Ajax请求的4个步骤和数据格式的设置 ■ 对于Ajax通用请求,jQuery内部封装了Ajax请求的4个步骤和数 ...
- 关于解决JQuery发送Ajax请求后，IE缓存数据不更新的问题
http://www.cnblogs.com/lys_013/archive/2013/08/07/3243435.html 今天在做ajax页面无刷新请求后台服务器数据的时候,IE下遭遇Ajax缓存 ...
- jQuery发送Ajax请求以及出现的问题
普通jQuery的Ajax请求代码如下: $.ajax({ type: 'POST', url: "http://xxx/yyy/zzz/sendVerifyCode", data ...
- jquery发送ajax请求返回数据格式
jquery向服务器发送一个ajax请求后,可以返回多种类型的数据格式,包括:html,xml,json,text等. 1.html格式的数据 "<div class='comment ...
- python测试开发django-50.jquery发送ajax请求(get)
前言 有时候,我们希望点击页面上的某个按钮后,不刷新整个页面,给后台发送一个请求过去,请求到数据后填充到html上,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.Ajax可以完美的 ...
随机推荐
- VijosP1443:银河英雄传说
描述 公元五八○一年,地球居民迁移至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展. 宇宙历七九九年,银河系的两大军事集团在巴米利恩星域爆发战争.泰山压顶集 ...
- HTML特殊字符的html、js、css写法汇总 （转）
⇠ 箭头类 符号 UNICODE 符号 UNICODE HTML JS CSS HTML JS CSS ⇠ ⇠ \u21E0 \21E0 ⇢ ⇢ \u21E2 \ ...
- cocos2d-x CCHttpRequest获取网络图片并显示
转自:http://www.cnblogs.com/hzj730/p/3178431.html //图片结构 class imgstruct : public CCObject { public: i ...
- 如何使用Git命令将项目从github或者服务器上克隆下来
在本地新建一个文件夹,作为本地仓库,如“demo”.单击右键git Bush here,打开git,输入命令: cd /c/Users/Administrator/Desktop/demo 然后按回 ...
- GroupItem ContextMenu Command mvvm
参照:https://stackoverflow.com/questions/38009642/how-do-i-bind-the-menuitem-of-a-contextmenu-of-a-dat ...
- c 无回显读取字符/不按回车即获取字符
最近课程设计要使用各种有趣的函数,这是其中一个 #include <conio.h> 使用方法 char c; c=getch(); 这样按下输入一个字符不按回车就ok了
- ACM-ICPC2018徐州网络赛 BE, GE or NE（对抗搜索+博弈+记忆化）
BE, GE or NE 23.58% 1000ms 262144K In a world where ordinary people cannot reach, a boy named &quo ...
- Keras实现CIFAR-10分类
仅仅为了学习Keras的使用,使用一个四层的全连接网络对MNIST数据集进行分类,网络模型各层结点数为:3072: : 1024 : 512:10: 使用50000张图片进行训练,10000张 ...
- 《深入理解Java虚拟机》笔记02 -- 垃圾收集算法
1. 标记 - 清除算法 先标记出所有需要回收的对象,在标记完成后统一回收所有被标记的对象.它是最基础的收集算法.其他收集算法都是根据其思路,改进其不足之处. 缺点:1) 标记和清除两个阶段的效率都不 ...
- 《深入理解Java虚拟机》笔记03 -- 垃圾收集器
收集器可以大致分为:单线程收集器, 并发收集器和并行收集器. 并行(Parallel):指多条垃圾收集线程并行工作,但此时用户线程仍然处于等待状态. 并发(Concurrent):指用户线程与垃圾收集 ...