提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Ajax请求服务端的五种方式

AJAX 方式 请求 服务端 五种
2023-09-11 14:16:33 时间

Ajax请求服务端的五种方式


首先要引入jQuery 

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

下载jQuery：https://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("注册成功！");
					}
			}

		);

相关文章