15_ajax

最新推荐文章于 2024-09-15 17:15:28 发布
最新推荐文章于 2024-09-15 17:15:28 发布
阅读量35 收藏
点赞数
分类专栏： 02_javaee 文章标签： 前端 ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61569709/article/details/132683857
版权

1 ajax概念

  • 概念
Asynchronous Javascript And XML（异步JavaScript和XML)
DHTML是动态的html： html+css+js+dom
ajax:dhtml+XMLHttpRequest对象
  • 作用
局部刷新：对jsp和servlet进行请求时  响应的都是一个完整的页面：：：
        只想让服务器响应一个数据 获取数据放到当前页面的某个标签/前段进行处理-----不要刷新整个页面 只是刷新一部分数据
同步请求：http协议是同步请求---客户端发送一个请求时 只有等待服务器端响应了 才能继续发第二个请求
异步请求：不需要等待上一个请求的响应 即可发送第二个请求
  • 常见的使用场景
百度的搜索框：局部刷新
提示账号存在：局部刷新
注册时发送右键：异步请求
...

2 原始的ajax

2.1 ajax请求的四步走

1：获取XMLHttpRequest对象
2：开启连接
3：发送请求
4：监听statechange事件 获取数据

2.2 准备servlet

package com.zhiyou100_10.ajax;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Demo01SAjax extends HttpServlet {
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		  req.setCharacterEncoding("utf-8");
		  String name=req.getParameter("name");
		  int age=Integer.parseInt(req.getParameter("age"));
		  resp.setCharacterEncoding("utf-8");
		  resp.setContentType("text/html;charset=utf-8");
		  resp.getWriter().print("get请求：：你叫"+name+",今年"+age+"岁了！");
	}

	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		  req.setCharacterEncoding("utf-8");
		  String name=req.getParameter("name");
		  int age=Integer.parseInt(req.getParameter("age"));
		  resp.setCharacterEncoding("utf-8");
		  resp.setContentType("text/html;charset=utf-8");
		  resp.getWriter().print("post请求：：你叫"+name+",今年"+age+"岁了！");
	}
}

2.3 原始的ajax的get请求

<input type="button" value="测试ajax的get请求"  onclick="testGet1()"/><br/>
<div id="div_show_get"></div>
<script type="text/javascript">
    function testGet1(){
        //1 获取XMLHttpRequest对象
        var xmlHttpRequest=getXMLHttpRequest();

        //2 获取连接
        //open参数1：请求方式get/post
        //open参数2：请求的url
        //open参数3：是否异步
        var age=parseInt(Math.random()*30+10);
        xmlHttpRequest.open("get","<c:url value='/ajax/s1.do?name=韩梅梅&age='/>"+age,true);

        //3 发送请求
        //send方法的参数是设置请求体的：
        //如果是get请求 参数必须是null
        //如果是gpost请求 参数必须是请求参数
        xmlHttpRequest.send(null);

        //4 监听statechange事件
        xmlHttpRequest.onreadystatechange=function(){
            //onreadystatechange事件对ajax请求的状态进行监控
            //xmlRequest.readyState=0：对象ActiveXObject初始化完毕
            //xmlRequest.readyState=1：对象ActiveXObject请求连接
            //xmlRequest.readyState=2：对象ActiveXObject连接成功
            //xmlRequest.readyState=3：服务器正在响应
            //xmlRequest.readyState=4：服务器响应完毕
            //xmlHttpRequest.status 是http的响应状态码
            if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                //接受服务器端的响应数据
                var text=xmlHttpRequest.responseText;
                $("#div_show_get").html(text.fontcolor("red").bold());
            }
        }
    }
    //1 获取XMLHttpRequest对象
    function getXMLHttpRequest(){
        var xmlHttpRequest;
        try{
            xmlHttpRequest=new XMLHttpRequest();//非ie浏览器获取对象
        }catch(e){
            try{
                xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");//ie5之前
            }catch(e){
                xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");//ie6 及其之后
            }
        }
        return xmlHttpRequest;
    }
</script>

2.4 原始的ajax的post请求

<input type="button" value="测试ajax的post请求"  onclick="testPost1()"/><br/>
<div id="div_show_post"></div>
<script type="text/javascript">
    function testPost1(){
        //1 获取XMLHttpRequest对象
        var xmlHttpRequest=getXMLHttpRequest();

        //2 获取连接
        //open参数1：请求方式get/post
        //open参数2：请求的url
        //open参数3：是否异步
        xmlHttpRequest.open("post","<c:url value='/ajax/s1.do'/>",true);

        //post请求在发送请求之前 需要设置一个请求头
        xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        //3 发送请求
        //send方法的参数是设置请求体的：
        //如果是get请求 参数必须是null
        //如果是gpost请求 参数必须是请求参数
        var age=parseInt(Math.random()*30+10);
        xmlHttpRequest.send("name=韩梅梅&age="+age);

        //4 监听statechange事件
        xmlHttpRequest.onreadystatechange=function(){
            //onreadystatechange事件对ajax请求的状态进行监控
            //xmlRequest.readyState=0：对象ActiveXObject初始化完毕
            //xmlRequest.readyState=1：对象ActiveXObject请求连接
            //xmlRequest.readyState=2：对象ActiveXObject连接成功
            //xmlRequest.readyState=3：服务器正在响应
            //xmlRequest.readyState=4：服务器响应完毕
            //xmlHttpRequest.status 是http的响应状态码
            if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                //接受服务器端的响应数据
                var text=xmlHttpRequest.responseText;
                $("#div_show_post").html(text.fontcolor("red").bold());
            }
        }
    }
</script>

3 对原生态的ajax进行封装

3.1 js文件

//type请求方式：get/post
//url请求资源的路径:::如果是get请求url中添加请求参数
//asyn是否异步
//data请求参数
//fn 得到响应数据后的回调函数
function myAjax(type,url,asyn,data,fn){
	    //1 获取XMLHttpRequest对象
	   var xmlHttpRequest=getXMLHttpRequest();
	   //2 开启连接
	   xmlHttpRequest.open(type,url,asyn);
	   if(type=="post"||type=="POST"){
		 //post请求在发送请求之前 需要设置一个请求头
    	   xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	   }
	   //3 发送请求
	   xmlHttpRequest.send(data);
	   
	   //4 监听statechange事件
	   xmlHttpRequest.onreadystatechange=function(){
         if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
         	 fn(xmlHttpRequest.responseText);
         }
	   }
}
//1 获取XMLHttpRequest对象
function getXMLHttpRequest(){
	   var xmlHttpRequest;
	   try{
		   xmlHttpRequest=new XMLHttpRequest();//非ie浏览器获取对象
	   }catch(e){
		   try{
			   xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");//ie5之前
		   }catch(e){
			   xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");//ie6 及其之后
		   }
	   }
	   return xmlHttpRequest;
}

3.2 自定义ajax文件的使用

<h1>使用自己封装的ajax方法实现ajax请求</h1>
<script type="text/javascript" src="ajax.js"></script>
<input type="button" value="测试ajax的get请求"  onclick="testGet2()"/><br/>
<div id="div_show_get_2"></div>
<script type="text/javascript">
    function testGet2(){
        var age=parseInt(Math.random()*30+10);
        myAjax("get","<c:url value='/ajax/s1.do?name=韩梅梅&age='/>"+age,true,null,function(respData){
            $("#div_show_get_2").html(respData.fontcolor("red").bold());
        });
    }
</script>
<hr/>
<input type="button" value="测试ajax的post请求"  onclick="testPost2()"/><br/>
<div id="div_show_post_2"></div>
<script type="text/javascript">
    function testPost2(){
        var age=parseInt(Math.random()*30+10);
        myAjax("post","<c:url value='/ajax/s1.do'/>",true,"name=韩梅梅&age="+age,function(respData){
            $("#div_show_post_2").html(respData.fontcolor("red").bold());
        });
    }
</script>

4 使用ajax实现省市联动

4.1 创建表

-- 创建字典表：存储一些简单的但必要的数据
-- id type name fid remark
CREATE TABLE library(
   id INT PRIMARY KEY AUTO_INCREMENT,
   TYPE VARCHAR(10) COMMENT '类型：city\province',
   NAME VARCHAR(100) COMMENT '类型：名字',
   fid INT COMMENT '类型：如果是city fid对应的就是其所在的省份',
   remark VARCHAR(200) COMMENT '备注',
   CONSTRAINT fk_1l2l2 FOREIGN KEY(fid)  REFERENCES library(id)
);
INSERT INTO library VALUES(1,"province","河南",NULL,NULL),(1001,"city","郑州",1,NULL)
,(NULL,"city","汝州",1,NULL)
,(NULL,"city","洛阳",1,NULL)
,(NULL,"city","南阳",1,NULL)
,(NULL,"city","信阳",1,NULL)
,(NULL,"city","安阳",1,NULL);
INSERT INTO library VALUES(2,"province","河北",NULL,NULL),(2001,"city","石家庄",2,NULL)
,(NULL,"city","衡水",2,NULL)
,(NULL,"city","廊坊",2,NULL)
,(NULL,"city","白洋淀",2,NULL)
,(NULL,"city","梁山",2,NULL);
INSERT INTO library VALUES(3,"province","北京",NULL,NULL),(3001,"city","海淀区",3,NULL)
,(NULL,"city","朝阳区",3,NULL)
,(NULL,"city","通州区",3,NULL)
,(NULL,"city","石景山区",3,NULL);
INSERT INTO library VALUES(4,"province","云南",NULL,NULL),(4001,"city","昆明",4,NULL)
,(NULL,"city","丽江",4,NULL)
,(NULL,"city","西双版南",4,NULL)
,(NULL,"city","玉溪",4,NULL)
,(NULL,"city","大理",4,NULL);

4.2 创建实体类

public class Library implements Serializable {
	//如果想通过省获取所有的市：：可以在省中定义一个数组/集合装其所有的城市
	private Integer id;
	private String name;
	private String type;
	private String remark;
	private Library flibrary;
    。。。
}

4.3 jdbc工具类

package com.zhiyou100_10.ajax;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

import com.mchange.v2.c3p0.ComboPooledDataSource;

public class Demo01C3p0Util {
	//创建连接池对象
	private static ComboPooledDataSource source;
	static{
		source=new ComboPooledDataSource();
	}
	//获取连接
	public static Connection getCon(){
		try {
			return source.getConnection();
		} catch (SQLException e) {
			throw new RuntimeException(e);
		}
	}
	
	//关闭连接
	public static void close(Connection con,Statement sta,ResultSet set){
		try {
			if(set!=null){set.close();}
			if(sta!=null){sta.close();}
			if(con!=null){con.close();}//c3p0已经重写了connection的close方法 不再是关闭连接 而是把连接放回到池对象中
		} catch (SQLException e) {
			throw new RuntimeException(e);
		}
		
	}
	public static void main(String[] args)throws Exception {
		Connection con=getCon();
		System.out.println(con);
	}
}

4.4 dao

package com.zhiyou100_10.ajax;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

public class LibraryDao {
   
	public List<Library> getAllProvince(){
		Connection con=Demo01C3p0Util.getCon();
		PreparedStatement pre=null;
		ResultSet set=null;
		List<Library> list=new ArrayList<Library>();
		try {
			pre=con.prepareStatement("select * from library where type=?");
			pre.setString(1, "province");
			set=pre.executeQuery();
			while(set.next()){
				list.add(new Library(set.getInt("id"), 
						set.getString("name"), 
						set.getString("type"),
						set.getString("remark"),null));
			}
			
		} catch (Exception e) {
			throw new RuntimeException(e);
		}
		Demo01C3p0Util.close(con, pre, set);
		return list;
	}
	public List<Library> getAllCityByFname(String privinceName){
		Connection con=Demo01C3p0Util.getCon();
		PreparedStatement pre=null;
		ResultSet set=null;
		List<Library> list=new ArrayList<Library>();
		try {
			//pre=con.prepareStatement("SELECT lcity.id cid,lcity.name cname,lcity.type ctype, lcity.remark cremark,"
			//		+ "lprovince.id pid,lprovince.name pname,lprovince.type ptype, lprovince.remark premark FROM library lcity,library lprovince WHERE lcity.TYPE=? AND lprovince.name=? AND lcity.fid=lprovince.id");
			pre=con.prepareStatement("SELECT * FROM library lcity,library lprovince WHERE lcity.TYPE=? AND lprovince.name=? AND lcity.fid=lprovince.id");
			
			pre.setString(1, "city");
			pre.setString(2, privinceName);
			set=pre.executeQuery();
			while(set.next()){
				//通过列明解析
//				list.add(new Library(set.getInt("cid"), 
//						set.getString("cname"), 
//						set.getString("ctype"),
//						set.getString("cremark"),
//						new Library(set.getInt("pid"), 
//								set.getString("pname"), 
//								set.getString("ptype"),
//								set.getString("premark"))));
				//通过列索引解析:列索引从1开始
				list.add(new Library(set.getInt(1), 
						set.getString(3), 
						set.getString(2),
						set.getString(5),
						new Library(set.getInt(6), 
								set.getString(8), 
								set.getString(7),
								set.getString(10))));
			}
			
		} catch (Exception e) {
			throw new RuntimeException(e);
		}
		Demo01C3p0Util.close(con, pre, set);
		return list;
	}
	public static void main(String[] args) {
		System.out.println(new LibraryDao().getAllProvince());
		System.out.println(new LibraryDao().getAllCityByFname("河南"));
	}

}

4.5 jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../02_jquery/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<title>ajax的省市联动</title>
<style type="text/css">
</style>
</head>
<body>
       地址选择：<select name="province"><option>请选择省/直辖市</option></select>  | 
   <select name="city"><option value="">请选择市/区</option></select>
   <!-- 文档加载完毕 通过ajax获取所有的省份 把每个省份对应一个option添加到province -->
   <script type="text/javascript">
      $(function(){
    	   //发送ajax请求：：：响应所有的省的名字 之间用-分割
    	   myAjax("get","<c:url value='/ajax/s21.do'/>",true,null,function(responseData){
    		   //通过-分割
    		   var provinceArr=responseData.split("-");
    		   for(var i=0;i<provinceArr.length;i++){
    			   $("select[name='province']").append("<option value='"+provinceArr[i]+"'>"+provinceArr[i]+"</option>");
    		   }
    	   });
      });
      $(function(){
    	  //当选中某个省份时 在city的seelct中应该加载此省所有的城市
   	      $("select[name='province']").change(function(){
   	    	  var value=$(this).val();
   	    	  if(value){
   	    		  //清空目前已有的city的option
   	    		  $("select[name='city'] option[value!='']").remove();
   	    		  //通过ajax获取当前省对应的所有城市
   	    		  myAjax("post","<c:url value='/ajax/s22.do'/>",true,"provinceName="+value,function(responseData){
	   	    		   //通过-分割
	   	    		   var cityArr=responseData.split("-");
	   	    		   for(var i=0;i<cityArr.length;i++){
	   	    			   $("select[name='city']").append("<option value='"+cityArr[i]+"'>"+cityArr[i]+"</option>");
	   	    		   }
   	    	      });
   	    	  }
   	      });
     });
   </script>
</body>
</html>

4.6 获取所有省份的servlet

LibraryDao dao=new LibraryDao();
List<Library> list=dao.getAllProvince();
StringBuffer stb=new StringBuffer("");
for (Library library : list) {
    stb.append(library.getName());
    stb.append("-");
}
stb.deleteCharAt(stb.length()-1);
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().print(stb.toString());

4.7 根据省份名字获取所有城市的servlet

req.setCharacterEncoding("utf-8");
String provinceName=req.getParameter("provinceName");
LibraryDao dao=new LibraryDao();
List<Library> list=dao.getAllCityByFname(provinceName);
StringBuffer stb=new StringBuffer("");
for (Library library : list) {
    stb.append(library.getName());
    stb.append("-");
}
stb.deleteCharAt(stb.length()-1);
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().print(stb.toString());

5 json

5.1 概念

JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式
     json是js可以直接解析一种键值对形式的对象类型的数据格式
格式：{属性名=属性值,属性名=属性值,属性名=属性值,属性名=属性值}
注意：属性名必须写在引号中：“” ''
值的类型：字符串+boolean+null+数字+数组[]+json对象{}

5.2 json案例1

<input type="button" value="测试json数据" onclick="test01()"/><br/>

<script type="text/javascript">
    function test01(){
        //定义一个json格式的数据
        var json1={"name":"苗天宝",
                   "age":36,
                   "sex":'男',
                   "score":[33.4,55.7,88.9,33,78],
                   "wife":{"wifeName":"胖妞","sifeSex":"女","wifeAge":33}};
        //js可以直接解析：通过json对象名.属性名来获取属性值
        alert(json1);
        alert("名字："+json1.name+",性别："+json1.sex+",分数："+json1.score+",老婆名字："+json1.wife.wifeName);      	   
    }

</script>

5.3 json数据的作用

    <!-- 要json数据有啥用：：
         页面作用：提供表单获取客户输入，把数据传递给后台
                            展示结果数据
           后台处理数据：访问数据库---数据库描述数据是table--student  sid sname sage score
                                       后台程序---java数据描述通过对象:student(sid,sname,sage,score)
         页面不识别java的对象：但js封装对象用json::{sid:xxx,sname:xxx,sage:xxx,score:xxx}
         总结json的使用：把java中的对象封装成json格式的字符串 传递给页面拿到的是json格式的字符串对象
                  "{sid:xxx,sname:xxx,sage:xxx,score:xxx}" 
                  使用Global的eval方法即可解析字符串获取json对象  {sid:xxx,sname:xxx,sage:xxx,score:xxx}                     
     -->
        <input type="button" value="测试eval方法" onclick="test02()"/>
    <script type="text/javascript">
        function test02(){
	         //创建json格斯的字符串
	        var str1="{\"name\":\张三丰\",\"age\":36, \"sex\":\"男\"}";
	        var str2="{'name':'张三丰','age':36,'sex':'男'}";
	        //使用eval解析字符串
	        var obj1=eval("("+str1+")");
	        alert("名字："+obj1.name+",性别："+obj1.sex);
        }
    </script>

5.4 servlect响应一个json格式的字符串

  • 创建bean
package com.zhiyou100_10.ajax;

import java.io.Serializable;
import java.util.Arrays;
import java.util.UUID;

public class Student implements Serializable{
	private Integer sid;
	private String sname;
	private Integer sage;
	private Float height;
	private Float[] scoreArr;
	public Integer getSid() {
		return sid;
	}
	public void setSid(Integer sid) {
		this.sid = sid;
	}
	public String getSname() {
		return sname;
	}
	public void setSname(String sname) {
		this.sname = sname;
	}
	public Integer getSage() {
		return sage;
	}
	public void setSage(Integer sage) {
		this.sage = sage;
	}
	public Float getHeight() {
		return height;
	}
	public void setHeight(Float height) {
		this.height = height;
	}
	public Float[] getScoreArr() {
		return scoreArr;
	}
	public void setScoreArr(Float[] scoreArr) {
		this.scoreArr = scoreArr;
	}
	@Override
	public String toString() {
		return "Student [sid=" + sid + ", sname=" + sname + ", sage=" + sage + ", height=" + height + ", scoreArr="
				+ Arrays.toString(scoreArr) + "]";
	}
	public Student(Integer sid, String sname, Integer sage, Float height, Float[] scoreArr) {
		super();
		this.sid = sid;
		this.sname = sname;
		this.sage = sage;
		this.height = height;
		this.scoreArr = scoreArr;
	}
	public Student() {
		this.sid=(int)(Math.random()*10000+1000);
		this.sage=(int)(Math.random()*10+15);
		this.sname=UUID.randomUUID().toString().replace("-", "").substring(1, 10);
		this.height=(int)(Math.random()*100+1700)/10.0f;
		scoreArr=new Float[]{(int)(Math.random()*1000)/10.0f,(int)(Math.random()*1000)/10.0f,(int)(Math.random()*1000)/10.0f,(int)(Math.random()*1000)/10.0f,(int)(Math.random()*1000)/10.0f};
	}
}
  • 页面
<hr/>
<input type="button" value="servlet响应json::一个对象" onclick="test03()"/><br/>
<script type="text/javascript">
    function test03(){
        //发送ajax方法 请求一个学生对象的jhson格式的字符串
        myAjax("post","<c:url value='/json/s31.do'/>",true,"n=1",function(responseData){
            alert("获取的数据："+responseData+",数据格式："+typeof(responseData));
            //eval解析
            var json3=eval("("+responseData+")");//不是语句 是一个数据
            alert(json3);
            alert(json3.sid+":"+json3.sname+":"+json3.height+":"+json3.scoreArr+":"+json3.sage);
        });
    }
</script>
<hr/>
<input type="button" value="servlet响应json::一个数组集合" onclick="test04()"/><br/>
<script type="text/javascript">
    function test04(){
        //发送ajax方法 请求一个学生对象的jhson格式的字符串
        myAjax("post","<c:url value='/json/s31.do'/>",true,"n=11",function(responseData){
            alert("获取的数据："+responseData+",数据格式："+typeof(responseData));
            //eval解析
            var json4=eval("("+responseData+")");//不是语句 是一个数据
            alert(json4);
            for(var i=0;i<json4.length;i++){
                alert("第"+(i+1)+"个对象的信息："+json4[i].sid+":"+json4[i].sname+":"+json4[i].height+":"+json4[i].scoreArr+":"+json4[i].sage);
            }
        });
    }
</script>
  • servlet
package com.zhiyou100_10.ajax;

import java.io.IOException;
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;

public class Demo031Json extends HttpServlet {
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//接受一个请求参数n
		int n=Integer.parseInt(req.getParameter("n"));
		//如果n为1 响应一个student对象对应的json格式的字符串
		//如果n为2 响应一个数组对象对应的json格式的字符串
		StringBuffer stb=new StringBuffer();
		//Integer sid, String sname, Integer sage, Float height, Float[] scoreArr
		if(n==1){
			Student student=new Student();
			stb.append("{\"sid\":"+student.getSid());
			stb.append(",\"sname\":\""+student.getSname()+"\"");
			stb.append(",\"sage\":"+student.getSage());
			stb.append(",\"height\":"+student.getHeight());
			stb.append(",\"scoreArr\":[");
			for (Float score:student.getScoreArr()) {
				stb.append(score+",");
			}  
			stb.deleteCharAt(stb.length()-1);
			stb.append("]}");
			System.out.println(stb.toString());
		}else{
			List<Student> list=new ArrayList<Student>();
			for (int i = 0; i < 5; i++) {
				list.add(new Student());
			}
			stb.append("[");
			for (Student student : list) {
				stb.append("{\"sid\":"+student.getSid());
				stb.append(",\"sname\":\""+student.getSname()+"\"");
				stb.append(",\"sage\":"+student.getSage());
				stb.append(",\"height\":"+student.getHeight());
				stb.append(",\"scoreArr\":[");
				for (Float score:student.getScoreArr()) {
					stb.append(score+",");
				}  
				stb.deleteCharAt(stb.length()-1);
				stb.append("]}");
				stb.append(",");
			}
			stb.deleteCharAt(stb.length()-1);
			stb.append("]");
			//最后得到的内容是："[{},{},{},{}]";
		}
		//把字符串响应给客户端
		resp.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		resp.getWriter().print(stb.toString());
	}

	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}

5.5 分析

java端把对象转换为json格式的字符串 比较麻烦  通过反射可以写一个工具类 实现对象到json格式的字符串的转换
别人已经写好的

6 通过json的jar 实现对象-josn格式的字符串

6.1 导入依赖

在这里插入图片描述

6.2 把一个对象转换为json格式的字符串

		//把一个对象解析为json格式的字符串 响应给客户端
		Student stu=new Student();
//		//把一个对象解析为json格式的字符串：
//		JSONObject json=JSONObject.fromObject(stu);//把对象解析为JSONObject类型的对象
//		//获取jxon格式的字符串
//		String jsonStr=json.toString();
//		System.out.println("jsonStr="+jsonStr);
		resp.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
//		resp.getWriter().print(jsonStr);
		resp.getWriter().print(JSONObject.fromObject(stu).toString());

6.3 把一个集合转化为json格式的字符串

List<Student> list=new ArrayList<Student>();
for (int i = 0; i < 5; i++) {
    list.add(new Student());
}
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().print(JSONArray.fromObject(list).toString());

6.4 页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>json</title>
<script type="text/javascript" src="../02_jquery/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
   
    <input type="button" value="servlet响应json::一个对象" onclick="test01()"/><br/>
    <script type="text/javascript">
         function test01(){
        	    //发送ajax方法 请求一个学生对象的jhson格式的字符串
        	   myAjax("get","<c:url value='/json/s41.do'/>",true,null,function(responseData){
        		   alert("获取的数据："+responseData+",数据格式："+typeof(responseData));
        		   //eval解析
        		   var json3=eval("("+responseData+")");//不是语句 是一个数据
        		   alert(json3);
        		   alert(json3.sid+":"+json3.sname+":"+json3.height+":"+json3.scoreArr+":"+json3.sage);
        	   });
         }
    </script>
    <hr/>
    <input type="button" value="servlet响应json::一个数组集合" onclick="test02()"/><br/>
    <script type="text/javascript">
         function test02(){
        	    //发送ajax方法 请求一个学生对象的jhson格式的字符串
        	   myAjax("get","<c:url value='/json/s42.do'/>",true,null,function(responseData){
        		   alert("获取的数据："+responseData+",数据格式："+typeof(responseData));
        		   //eval解析
        		   var json4=eval("("+responseData+")");//不是语句 是一个数据
        		   alert(json4);
        		   for(var i=0;i<json4.length;i++){
        			   alert("第"+(i+1)+"个对象的信息："+json4[i].sid+":"+json4[i].sname+":"+json4[i].height+":"+json4[i].scoreArr+":"+json4[i].sage);
        		   }
        	   });
         }
    </script>
</body>
</html>

6.5 注意：如果对象的属性是date类型：：获取的json对象的此属性值也是json对象

<input type="button" value="servlet响应json::一个对象:对象含有date属性" onclick="test01()"/><br/>
<script type="text/javascript">
    function test01(){
        //发送ajax方法 请求一个学生对象的jhson格式的字符串
        myAjax("get","<c:url value='/json/s51.do'/>",true,null,function(responseData){
            alert("获取的数据："+responseData+",数据格式："+typeof(responseData));
            //eval解析
            var json3=eval("("+responseData+")");//不是语句 是一个数据
            alert(json3);
            alert(json3.sid+":"+json3.sname+":"+json3.height+":"+json3.scoreArr+":"+json3.sage+":"+json3.sbirth+":"+json3.sbirth.year+":");
            //日期类型的属性：被jsonobject对象解析为为json::此json对象的属性和js的Date类型完全相同
            alert((json3.sbirth.year+1900)+":"+(json3.sbirth.month+1)+":"+json3.sbirth.date+":"+json3.sbirth.hours+":"+json3.sbirth.minutes+":"+json3.sbirth.seconds);
        });
    }
</script>

7 jquery操作ajax的方法

7.1 jquery中ajax方法

  • 页面
<!-- 
jquery中ajax相关的方法：
jQuery.ajax([options])：：：参数是json对象
属性：async：Boolean 是否异步
cache：Boolean 是否使用缓存
contentType：String    请求数据类型：(默认: "application/x-www-form-urlencoded") 
data：String    请求参数
dataType：String 期待服务器端响应数据的类型：text/json(通过eval解析即可得到json)
success：Function  成功的回调函数
type：String 请求方式 （ 默认）GET/PSOT
url：String 请求的url
-->
<input type="button" value="测试jquery的ajax方法：ajax：：get请求  获取text" onclick="test01()"/><br/>
<div id="div_1"></div>
<script type="text/javascript">
    function test01(){
        $.ajax({
            async:true,//是否异步    默认true
            cache:false,//是否使用缓存   默认false
            contentType:"application/x-www-form-urlencoded",//提交方式  默认 application/x-www-form-urlencoded
            type:"GET",//请求方式  默认GET

            data:"a=1&b=2",//请求参数
            dataType:"text",//期待服务器端响应的数据类型
            url:"<c:url value='/ajax/s61.do'/>",//url
            success:function(data){//成功后的回调函数
                alert(data);
                $("#div_1").html(("s61.do响应的内容是"+data).fontcolor("red").bold()); 
            }
        });
    }
</script>
<hr/>
<input type="button" value="测试jquery的ajax方法：ajax：：post请求  获取json" onclick="test02()"/><br/>
<div id="div_2"></div>
<script type="text/javascript">
    function test02(){
        $.ajax({
            async:true,//是否异步    默认true
            cache:false,//是否使用缓存   默认false
            contentType:"application/x-www-form-urlencoded",//提交方式  默认 application/x-www-form-urlencoded

            type:"POST",//请求方式  默认GET
            data:"sage=18&sname=hmm&height=180.1",//请求参数
            dataType:"json",//期待服务器端响应的数据类型
            url:"<c:url value='/ajax/s62.do'/>",//url
            success:function(data){//成功后的回调函数
                alert(data);
                $("#div_2").html(("s62.do响应的内容是"+data.sid+":"+data.sname+":"+data.height+":"+data.scoreArr).fontcolor("red").bold()); 
            }
        });
    }
</script>
  • servlet:get请求返回一个text：/ajax/s61.do
req.setCharacterEncoding("utf-8");

int a=Integer.parseInt(req.getParameter("b"));
int b=Integer.parseInt(req.getParameter("b"));
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().print("a="+a+",b="+b+",a+b="+(a+b));
  • servlet:get请求返回一个json：/ajax/s62.do
req.setCharacterEncoding("utf-8");
String sname=req.getParameter("sname");
int sage=Integer.parseInt(req.getParameter("sage"));
float height=Float.parseFloat(req.getParameter("height"));
Student stu=new Student();
stu.setSname(sname+"同学");
stu.setSage(sage+10);
stu.setHeight(height+10);
resp.setContentType("text/html;charset=utf-8");
resp.setCharacterEncoding("utf-8");
resp.getWriter().print(JSONObject.fromObject(stu).toString());

7.2 jquery中get方法和post方法

  • 方法声明
<!-- 
jquery中ajax相关的方法：
jQuery.ajax([options])：：：参数是json对象
属性：async：Boolean 是否异步
    cache：Boolean 是否使用缓存
    contentType：String    请求数据类型：(默认: "application/x-www-form-urlencoded") 
    data：String    请求参数
    dataType：String 期待服务器端响应数据的类型：text/json(通过eval解析即可得到json)
    success：Function  成功的回调函数
    type：String 请求方式 （ 默认）GET/PSOT
    url：String 请求的url

jQuery.get(url, [data], [callback], [type])
jQuery.post(url, [data], [callback], [type])
    参数：   url:请求路径
            data:请求参数
            callback：成功的回调函数
            type：期待响应的数据类型   
-->
  • jsp
<input type="button" value="测试jquery的get方法：  获取text" onclick="test01()"/><br/>
<div id="div_1"></div>
<script type="text/javascript">
    function test01(){
        $.get("<c:url value='/ajax/s63.do'/>","n=1&a=1&b=3",function(data){
            $("#div_1").html(("s63.do响应的内容是"+data).fontcolor("red").bold()); 
        },"text");
    }
</script>
<hr/>
<input type="button" value="测试jquery的get方法：  获取json" onclick="test02()"/><br/>
<div id="div_2"></div>
<script type="text/javascript">
    function test02(){
        $.get("<c:url value='/ajax/s63.do'/>","n=2&sage=18&sname=hmm&height=180.1",function(data){
            $("#div_2").html(("s63.do响应的内容是"+data.sid+":"+data.sname+":"+data.height+":"+data.scoreArr).fontcolor("red").bold()); 
        },"json");
    }
</script>
<hr/>
<input type="button" value="测试jquery的post方法：  获取text" onclick="test03()"/><br/>
<div id="div_3"></div>
<script type="text/javascript">
    function test03(){
        $.post("<c:url value='/ajax/s63.do'/>","n=3&a=2&b=6",function(data){
            $("#div_3").html(("s63.do响应的内容是"+data).fontcolor("red").bold()); 
        },"text");
    }
</script>
<hr/>
<input type="button" value="测试jquery的post方法：  获取json" onclick="test04()"/><br/>
<div id="div_4"></div>
<script type="text/javascript">
    function test04(){
        $.post("<c:url value='/ajax/s63.do'/>","n=4&sage=18&sname=hmm&height=180.1",function(data){
            $("#div_4").html(("s63.do响应的内容是"+data.sid+":"+data.sname+":"+data.height+":"+data.scoreArr).fontcolor("red").bold()); 
        },"json");
    }
</script>
  • servlet
package com.zhiyou100_10.ajax;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

public class Demo062JqueryUseAjaxByGetPost extends HttpServlet {
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		resp.setCharacterEncoding("utf-8");
		//获取请求参数n
		int n=Integer.parseInt(req.getParameter("n"));
		if(n==1){//响应的是字符串
			  int a=Integer.parseInt(req.getParameter("b"));
			  int b=Integer.parseInt(req.getParameter("b"));
			  resp.getWriter().print("a="+a+",b="+b+",a+b="+(a+b));
			  return;
		}
		if(n==2){//响应json格式的字符串
			  String sname=req.getParameter("sname");
			  int sage=Integer.parseInt(req.getParameter("sage"));
			  float height=Float.parseFloat(req.getParameter("height"));
			  Student stu=new Student();
			  stu.setSname(sname+"同学");
			  stu.setSage(sage+10);
			  stu.setHeight(height+10);
			  resp.getWriter().print(JSONObject.fromObject(stu).toString());
		}
	}

	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		resp.setCharacterEncoding("utf-8");
		//获取请求参数n
		int n=Integer.parseInt(req.getParameter("n"));
		if(n==3){//响应的是字符串
			  int a=Integer.parseInt(req.getParameter("b"));
			  int b=Integer.parseInt(req.getParameter("b"));
			  resp.getWriter().print("a="+a+",b="+b+",a+b="+(a+b));
			  return;
		}
		if(n==4){//响应json格式的字符串
			  String sname=req.getParameter("sname");
			  int sage=Integer.parseInt(req.getParameter("sage"));
			  float height=Float.parseFloat(req.getParameter("height"));
			  Student stu=new Student();
			  stu.setSname(sname+"同学");
			  stu.setSage(sage+10);
			  stu.setHeight(height+10);
			  resp.getWriter().print(JSONObject.fromObject(stu).toString());
			  System.out.println("post:::"+n);
		}
	}
}
Ayui.
关注
专栏目录
web-15-ajax.zip_ajax_web ajax_zip_视频web
09-20
在本"web-15-ajax.zip"压缩包中，包含的“ajax_web”主题教学视频，将深入讲解Ajax的基础知识和实际应用。** **1. Ajax基础** Ajax的基本工作原理是通过JavaScript创建XMLHttpRequest对象，然后使用这个对象向...
ljne.zip_ajax_ground5k2_seldomocf
09-20
标题中的"ljne.zip_ajax_ground5k2_seldomocf"可能是一个项目或代码库的命名，其中包含了多个关键词。"ajax"通常指的是Asynchronous JavaScript and XML，是一种创建动态网页的技术，允许页面在不重新加载整个页面的...
WebIM_Ajax框架
03-02
本 WebIM 系统采用 B/S 模式，使用浏览器 ajax 实现即时聊天。 服务器端采用 MC 设计模式，Controler 分为组包拆包模块（编码子模块、加密解密子模块、序列化/反序列化子模块）和主处理模块（包含：Manager、DAO）；...
IntraWEB1512_intraweb15_intraweb_
09-30
4. **AJAX支持**：通过异步JavaScript和XML技术，IntraWeb1512能够实现页面的部分刷新，提高用户体验，同时减轻服务器负担。 5. **安全特性**：内置的安全机制，如会话管理、身份验证和授权，确保了应用的安全性。 ...
ajax跨域请求js拒绝访问的解决方法
12-09
求解决办法 代码如下: ajax{ url ：“http://xxxx/app”， type:... 您可能感兴趣的文章:跨域请求之jQuery的ajax jsonp的使用解惑AJAX跨域请求json数据的实现方法jQuery.ajax 跨域请求webapi设置headers的解决方案JQuer
[项目][WebServer][日志设计]详细讲解
SnowK博客
09-11 4431
[项目][WebServer][日志设计]详细讲解
easyexcel模板导出并且公式自动计算的方法
weixin_47615289的博客
09-11 397
【代码】easyexcel模板导出并且公式自动计算的方法。
经验笔记：Web 浏览器存储手段
qq_45831414的博客
09-10 876
以上就是使用 IndexedDB 的基本步骤。IndexedDB 提供了强大的数据存储能力，并且可以通过索引来优化数据检索性能。在实际应用中，可能还需要处理更复杂的场景，比如数据迁移、错误处理等。务必确保你的代码能够妥善处理各种异常情况。
JS笔记
2201_76100326的博客
09-11 504
Math对象属于Javascript内置对象，无需实例化（不需要添加new ），可以直接使用。只有一个Math.PI的属性。
WebGL系列教程六（纹理映射与立方体贴图）
AIGIS的博客
09-12 1233
上一讲我们讲了如何使用索引绘制彩色立方体，还留了一个思考题：怎么让立方体的每个面都保持一个颜色?这一讲我们就来解决这个问题，并引出纹理映射和立方体贴图。其实这个词语还是比较好理解。见名知意，大概意思就是把纹理映射到某个地方，纹理是什么？现在你可以简单的认为纹理就是一张图片。把一张二维的图片映射到一个三维物体的表面，就叫纹理映射。本节我们从如何将立方体每个面的颜色改为相同的颜色开始，介绍到了如何将图片贴到立方体的表面，系统的分析了为什么不能再共用顶点，并将代码进行了修改，以及讲解了纹理坐标的使用。
Vue3中slot插槽的几种使用实践
小小默：进无止境
09-14 475
父组件子组件父组件中Category 组件标签内的东西将会呈现在子组件slot的位置（进行替换）。
构建高效 Python Web API：RESTful 设计与 GraphQL 实践
weixin_52392194的博客
09-11 1326
在现代 Web 开发中，API 是前后端通信的核心枢纽，设计一个高效且易于扩展的 API 是保证系统良好运行的基础。本文详细探讨 RESTful API 的设计准则，如何生成 API 文档，GraphQL 的应用，以及如何在 FastAPI 和 Django REST Framework 中实现分页、过滤、认证等功能。
前端CSS面试常见题
m0_73761441的博客
09-11 544
前端CSS面试常见题，包含边界塌陷、bfc、csshack、src和href的区别、浏览器内核、兼容性问题、flex和grid优劣对比
前端Excel热成像数据展示及插值算法
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
09-11 989
热成像技术在工业、医学和科学研究中发挥了重要作用，它能够通过捕捉不同物体的温度分布图像来提供宝贵的信息。然而，要有效地展示和分析这些热成像数据，我们需要使用适当的工具和算法。本文将介绍如何使用Excel展示热成像数据，并实现插值算法以增强数据分析的准确性和可视化效果。Excel作为一种强大的数据处理工具，可以有效地展示和分析热成像数据。通过合理使用插值算法，可以提升数据的连续性和可视化效果。希望本文能帮助你更好地利用Excel进行热成像数据的展示和分析。
vue3 透传 Attributes
最新发布
咸鱼滚滚
09-15 442
“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。 当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。 最常见的例子就是 class、style 和 id。
计算机毕业设计 基于SpringBoot的课程教学平台的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-12 889
本文介绍了一款基于Java、SpringBoot和Vue.js技术的课程教学平台。该平台服务于管理员、学生和教师，提供教学资源管理、课程信息浏览、作业提交与批改等功能，旨在优化教学流程，提升教育质量，促进教育资源的数字化共享，推动教育信息化发展。
测试ASP.NET Core的WebApi项目调用WebService
gc_2299的博客
09-15 293
记录在WebApi中调用WebService的基本方式。
浅谈WebService
a876106354的博客
09-13 1068
WebService是一个术语，通常用来描述一种软件系统，它通过网络提供服务。这些服务可以是任何形式的，比如执行计算、处理数据、提供信息等。WebServices使得不同的应用程序能够通过标准化的协议（如HTTP）进行通信和数据交换。在项目中创建一个模型。例如，创建一个名为set;set;set;
vue3前端tab切换
susu1083018911的博客
09-12 423
vue3前端tab切换
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值