Ajax的多种使用

最新推荐文章于 2023-10-29 10:04:41 发布

洒脱_。

最新推荐文章于 2023-10-29 10:04:41 发布

阅读量139

点赞数

分类专栏： jsp基本

本文链接：https://blog.csdn.net/qq_43984255/article/details/87873635

版权

jsp基本专栏收录该内容

9 篇文章 0 订阅

订阅专栏

原生的ajax使用的核心对象XMLHttpRequest对象

在jsp页面里面导入js文件

<h2>注册页面</h2>
	用户名:<input type="text" name="userName" id="userName"/><span></span>
	<script type="text/javascript">
		$(function(){
			var xmlhttp;//全局变量
			$("#userName").blur(function(){    //失焦事件
				if($(this).val()==""){         //判断当前的value值是否为空
					alert("用户名不能为空!");		
				}else{
					//判断浏览器版本,创建XMLhttpRequest对象
					if(window.XMLHttpRequest){
    		       		xmlHttp=new XMLHttpRequest();//IE6,IE7
    		       	}else{
    		        	xmlHttp=new ActiveObject("Microsoft.XMLHttp");//IE7以上或其他
    		        }
						xmlHttp.onreadystatechange=callback;//设置回调函数
    		        	var url="AjaxServlet?userName="+$(this).val();//进行验证的后台地址
    		        	xmlHttp.open("get",url,true);//创建请求 
    		        	xmlHttp.send(null);	//发送请求
				}
			});
			//命名回调函数
			function callback(){
				//xmlhttp.status==200(表示服务器正确返回响应)
				if(xmlHttp.status=200 && xmlHttp.readyState==4){
	    			var a=xmlHttp.responseText;//拿到返回的结果
	    			if(a=="true"){
	    				$("span").html("用户名可用");
	    				$("span").css("color","green");
	    			}else{
	    				$("span").html("用户名已经被占用,请重新取名");
	    				$("span").css("color","red");
	    			}
    			}
			}
		});
	</script>

2.发送请求到servlet

package com.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 AjaxServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		response.setCharacterEncoding("utf-8");
		request.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		//获取值
		String userName = request.getParameter("userName");
		//创建数组
		String[] str={"zhangsan","lisi","wangwu","zhaoliu"};
		boolean f=true;
		for (String s : str) {
			if (userName.equals(s)) {
				f=false;
			}
		}
		System.out.println(f);
		out.print(f);//传回去
	}

}

使用Jquery的$.ajax();

使用JqueryAjax异步刷新
	<h2>注册页面</h2>
	用户名:<input type="text" name="userName" id="userName"/><span></span>
	<script type="text/javascript">
		$(function(){	
			$("#userName").blur(function(){
				if($(this).val()==""){
					alert("用户名不能为空");
				}else{
					$.ajax({
						"url":"AjaxServlet",//发送的地址
						"type":"get",//发送请求的方式(默认get)
						"data":"userName="+$("#userName").val(),//发送的数据
						"dateType":"text",//返回数据的类型
						"success":callback,  //请求成功后调的函数
						"complete":function(){
							alert("无论请求成功还是失败都执行complete");
						}
					});	
				}
			});
			
			function callback(data){
				if(data=="true"){
					$("span").html("用户名可以用!");
					$("span").css("color","green");
				}else{
					$("span").html("用户名已存在,请从新命名!");
					$("span").css("color","red");
				}
			}
		});
	</script>

<body>	
	Jquery的 $.get(); 语法:$.get(url,[data],[success],"html");返回html类型的数据
	<div></div>
	<script type="text/javascript">
		$(function(){
			$.get("HtmlServlet",callbcak,"html");
			function callbcak(data){
				$("div").html(data);		
			};
		});
	</script>
</body>

使用Jquery的$.get(url,[data],[success],[datatype])进行异步刷新
	<h2>注册页面</h2>
	用户名:<input type="text" name="userName" id="userName"/><span></span>
	<script type="text/javascript">
		$(function(){	
			$("#userName").blur(function(){
				if($(this).val()==""){
					alert("用户名不能为空");
				}else{
					//使用jquery的$.get(url,[data],[success],[datatype]);方法来进行异步刷新
					$.get("AjaxServlet","userName="+$("#userName").val(),callback,"text");
				}
			});
			
			function callback(data){
				if(data=="true"){
					$("span").html("用户名可以用!");
					$("span").css("color","green");
				}else{
					$("span").html("用户名已存在,请从新命名!");
					$("span").css("color","red");
				}
			}
		});
	</script>

使用Jquery的$.post(url,[data],[success],[datatype])进行异步刷新

使用Jquery的$.post(url,[data],[success],[datatype])进行异步刷新
	<h2>注册页面</h2>
	用户名:<input type="text" name="userName" id="userName"/><span></span>
	<script type="text/javascript">
		$(function(){	
			$("#userName").blur(function(){
				if($(this).val()==""){
					alert("用户名不能为空");
				}else{
					//使用jquery的$.get(url,[data],[success],[datatype]);方法来进行异步刷新
					$.post("AjaxServlet","userName="+$("#userName").val(),callback,"text");
				}
			});
			
			function callback(data){
				if(data=="true"){
					$("span").html("用户名可以用!");
					$("span").css("color","green");
				}else{
					$("span").html("用户名已存在,请从新命名!");
					$("span").css("color","red");
				}
			}
		});
	</script>

使用Jquery的$.getJSON(url,[data],[success])进行异步刷新

使用Jquery的$.getJSON(url,[data],[success])进行异步刷新
	<div></div>
	<script type="text/javascript">
		$(function(){
			var $table=$("<table border=1 cellpadding=0 cellspacing=0></table>");
			$.getJSON("JsonAjaxServlet",callback);
			function callback(data){
				$(data).each(function(){
					$table.append("<tr><td>"+this.no+"</td><td>"+this.name+"</td><td>"+this.age+"</td></tr>");
				});
				$table.appendTo("div");
			};	
		});
	</script>

Jquery的 $.get();返回html类型的数据

创建servlet保存数据转发到另一个jsp做显示

package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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

import com.entity.Student;

public class HtmlServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		response.setCharacterEncoding("utf-8");
		request.setCharacterEncoding("utf-8");
		//如果简单的html代码 可以直接out.print();复杂的就先保存在转发到另一个jsp专门显示
//		out.print("<h2>这是有ajax获取的网页内容</h2>");
		List<Student> students=new ArrayList<Student>();
		students.add(new Student(1001,"zhangsan",20));
		students.add(new Student(1002,"lisi",22));
		students.add(new Student(1003,"wangwu",23));
		request.setAttribute("students", students);
		request.getRequestDispatcher("showStu.jsp").forward(request, response);
	}

}

创建一个显示jsp

<body>
	<table border="1px" >
	<caption>学生信息</caption>
	<c:forEach items="${students }" var="s">
		<tr>
			<td>${s.no }</td>
			<td>${s.name }</td>
			<td>${s.age }</td>
		</tr>
	</c:forEach>
	</table>
</body>

收发请求的jsp

<body>	
	Jquery的 $.get(); 语法:$.get(url,[data],[success],"html");返回html类型的数据
	<div></div>
	<script type="text/javascript">
		$(function(){
			$.get("HtmlServlet",callbcak,"html");
			function callbcak(data){
				$("div").html(data);		
			};
		});
	</script>
</body>

使用$(selector).load(url,[data],[complete]);拿到数据直接加载到$(selector)

<script type="text/javascript">
		$(function(){
			//$("div").load("HtmlServlet");//省了一步回调函数	
			$("div").load("index.jsp #test");
		});
	</script>

使用ajax提交form表单数据

	<form >
		用户名:<input type="text" name="userName"/>
		密码:<input type="text" name="password"/>
			<input type="submit" value="提交"/>
	</form>
	<script type="text/javascript">
		$(function(){
			var $form=$("form");
			var $input=$form.find("input");
			$("[type='submit']").click(function(){
				//var array=$form.serializeArray();//将表单编码成Json数组格式
				//var string=$.param(array);//把数组转换成字符串
				var string=$input.serialize();//方法二
				alert(string);
				$.get("FormServlet",string,callback,"text");
			});
			
			function callback(data){
				alert(data);
			}
		});
	</script>