jq实现ajax(全)

最新推荐文章于 2023-06-23 22:48:17 发布

键盘歌唱家

最新推荐文章于 2023-06-23 22:48:17 发布

阅读量2.3k

点赞数 4

分类专栏： javaweb 文章标签： ajax java

本文链接：https://blog.csdn.net/MoastAll/article/details/107675076

版权

javaweb 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

学过js实现ajax的人都知道，写起来是十分的麻烦的，所以企业开发都会推荐jq来实现该功能。所以不用说，我们都知道，本文要讲的东西需要引入jq库。
一、$ajax方式
前台写法：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
		function register(){
			var $mobile = $("#mobile").val();//拿出下面文本框的值
			/*下面是套路写法
			$.ajax({
				url:服务器地址，
				请求方式：get|post,
				data:请求数据,
		        success:function(reslust(接受服务端的数据)，textStatus(服务器的返回状态)){
		        }
			    error:function(xhr,errorMessage,e){
			    }
			});
			*/
			$.ajax({
				url:"MobileServlet",
				请求方式:"post",
				data:"mobile="+$mobile,
		        success:function(result,textStatus){
		        	if(result == "true"){
		        		alert("已存在！！注册失败！！");
		        	}else{
		        		alert("注册成功！！！");
		        	}
		        },
			    error:function(xhr,errorMessage,e){
			    	//代码写错了自动进入error，可以不写
			    	alert("系统异常！");
			    }
			});
		}
	</script>
	<title>Insert title here</title>
</head>

<body>
	<input id="mobile"/><br/>
	<input type="button" value="注册" onclick="register()"/><!-- register~register4都可以替换 -->
</body>
</html>

后台：

package org.lanqiao.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MobileServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		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");
		}else {
			out.write("false");
		}
		out.close();
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

二、$get 和 $post 方式
由于指定了请求方式，该方法比前面的那个要简单一点
前台：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
		function register2(){
			var $mobile = $("#mobile").val();//拿出下面文本框的值
			/*$.get法  (post法就是把第一行改成$.post即可)
			   $.get(
			          服务器地址，
			          请求数据,
			     function (result){   	  
			      },
			      预期返回值类型（xml\string）
			   );
			*/
			$.get(
				"MobileServlet",
				"mobile="+$mobile,
			     function (result){ 
					if(result == "true"){
		        		alert("已存在！！注册失败！！");//这里可以写成document.write()
		        	}else{
		        		alert("注册成功！！！");
		        	}
			      },
			      "text"
			   );
		}
	</script>
	<title>Insert title here</title>
</head>

<body>
	<input id="mobile"/><br/>
	<input type="button" value="注册" onclick="register2()"/><!-- register~register4都可以替换 -->
</body>
</html>

后台：

package org.lanqiao.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MobileServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		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");
		}else {
			out.write("false");
		}
		out.close();
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

三、$load
此种写法更加的简介。
前台：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
		function register3(){//将服务端的返回值 直接加载到$(选择器)所选择的元素中
			var $mobile = $("#mobile").val();//拿出下面文本框的值
			/*
			$("#tip").load(
			        服务器地址,
			        请求数据
			);
			*/
			$("#tip").load(
			        "MobileServlet",
			        "mobile="+$mobile
			);
		}
	</script>
	<title>Insert title here</title>
</head>

<body>
	<input id="mobile"/><br/>
	<input type="button" value="注册" onclick="register2()"/><!-- register~register4都可以替换 -->
	<span id="tip"></span><!--显示结果-->
</body>
</html>

后台：

package org.lanqiao.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MobileServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		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("号码重复，注册失败");
		}else {
			out.write("注册成功");
		}
		out.close();
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

三、$getJSON
前台：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
		//json方式的请求数据
function register4(){
	var $mobile = $("#mobile").val();
	/*
	$.getJSON(
	     服务器地址,
	   JSON格式的请求数据,
	   function (request){
	   }
	);
	*/
	$.getJSON(
			"MobileServlet",
			//"mobile="+$mobile,
			{"mobile":$mobile},
		     function (result){ 
				if(result.msg == "true"){
	        		alert("已存在！！注册失败！！");
	        	}else{
	        		alert("注册成功！！！");
	        	}
		      }
		);
}
	</script>
	<title>Insert title here</title>
</head>

<body>
	<input id="mobile"/><br/>
	<input type="button" value="注册" onclick="register2()"/><!-- register~register4都可以替换 -->
</body>
</html>

后台：

package org.lanqiao.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MobileServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		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.print("{\"msg\":\"true\"}");//用write也行
		}else {
			out.print("{\"msg\":\"false\"}");
		}
		out.close();
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

注如果想要后台直接返回处理好的json对象
则需要下面几步：
1.第一步引入下面的三个jar包：
在这里插入图片描述
2.前台：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
		function testJson(){
			$.getJSON(
					"JsonServlet",
					//"mobile="+$mobile,
					{"name":"adsad","age":84894},
				     function (result){ 
						//js需要通过eval()函数 将返回值 转化为一个js能够识别的json对象
						var json = eval(result);
					    $.each(json,function(i,element){
					    	alert(this.name+"---"+this.age);
					    });
				      }
				);
		}
	</script>
	<title>Insert title here</title>
</head>

<body>
	<input type="button" value="测试json" onclick="testJson()"/>
</body>
</html>

后台：注意这里输出只能写print 不能写 write

package org.lanqiao.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.lanqiao.entity.Student;

import net.sf.json.JSONObject;

/**
 * Servlet implementation class JsonServlet
 */
public class JsonServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	request.setCharacterEncoding("utf-8");
	response.setCharacterEncoding("utf-8");
	response.setContentType("text/html;charset=UTF-8");
	Student stu1 = new Student();
	stu1.setAge(23);
	stu1.setName("zs");
	
	Student stu2 = new Student();
	stu2.setAge(54);
	stu2.setName("ww");
	
	Student stu3 = new Student();
	stu3.setAge(42);
	stu3.setName("ls");
	
	PrintWriter out = response.getWriter();
	JSONObject json = new JSONObject();
	json.put("stu1",stu1);
	json.put("stu2",stu2);
	json.put("stu3",stu3);
	
    out.print(json);//返回json对象 {"stu1":stu1,"stu2":stu2,"stu3":stu3}
    
    //测试前端传来的数据
    System.out.println(request.getParameter("name")+"====="+request.getParameter("age"));
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

键盘歌唱家

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
jq实现ajax(全)

学过js实现ajax的人都知道，写起来是十分的麻烦的，所以企业开发都会推荐jq来实现该功能。所以不用说，我们都知道，本文要讲的东西需要引入jq库。一、$ajax方式前台写法：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head> <meta charset="UT
复制链接

扫一扫