Ajax请求服务端的五种方式
首先要引入jQuery
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> 复制代码
下载jQuery：jquery.com/download/
方式一 （一般方式）
框架：
$.ajax({ url:“服务器地址“, type:”get“|"post", data:{请求数据}, success:function(result,testStatus){ //请求成功回调函数处理代码 }, error:function(xhr,errrorMessage,e){ //请求失败回调函数处理代码 } }); 复制代码
实现
index.jsp
function register() { var $mobile = $("#mobile").val(); $.ajax({ url:"MobileServlet", 请求方式:"post", data:"mobile="+$mobile, success:function(result,testStatus) { if(result == "true"){ alert("已存在！注册失败！"); }else{ alert("注册成功！"); } }, error:function(xhr,errrorMessage,e){ alert("系统异常！"); } }); } <body> 手机：<input id="mobile"/> <br/> <input type="button" value="注册" onclick="register()" /> <span id="tip"></span> </body> 复制代码
Servlet （下同）
request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); response.setContentType("text/html; charset=UTF-8"); String mobile = request.getParameter("mobile") ; //假设此时 数据库中 只有一个号码：18888888888 PrintWriter out = response.getWriter(); if("18888888888".equals(mobile)) { out.write("true");//servlet以输出流的方式 将信息 返回给客户端 }else { out.write("false"); } out.close(); 复制代码
方式二（Get方式）
框架
$.get( 服务器地址, 请求数据, function (result){ }, 预期返回值类型（string\xml） ); 复制代码
2、代码实现
$.get( "MobileServlet", "mobile="+$mobile, function (result){ if(result == "true"){ alert("已存在！注册失败！"); }else{ alert("注册成功！"); } } ); 复制代码
方式三（Post方式）
1、格式
$.post( 服务器地址, 请求数据, function (result){ }, "xml" 或 "json" 或 "text" ); 复制代码
2、代码实现
$.post( "MobileServlet", "mobile="+$mobile, function (result){ if(result == "true"){ alert("已存在！注册失败！"); }else{ alert("注册成功！"); } }, "text" ); 复制代码
方式四（Load方式）
1、格式
$(xxx).load( 服务器地址, 请求数据 ); load:将服务端的返回值 直接加载到$(xxx)所选择的元素中 复制代码
2、代码实现
$("#tip").load( "MobileServlet", "mobile="+$mobile ); 复制代码
方式五（JSON方式）
1、格式
$.getJSON( 服务器地址, JSON格式的请求数据, function (result){ } 复制代码
);
2、代码实现
var student = {"name":"zs" , "age":23} ; var students =[ {"name":"zs" , "age":23} , {"name":"ls" , "age":24} , {"name":"ww" , "age":25} ]; alert(students[1].name +"--" +students[1].age) ; $.getJSON( "MobileServlet", {"mobile":$mobile}, function (result){//msg:true|false alert(123); if(result.msg == "true"){ alert("已存在！注册失败！"); }else{ alert("注册成功！"); } } );
