Ajax笔记---day02

最新推荐文章于 2024-07-12 16:42:46 发布

Zll0

最新推荐文章于 2024-07-12 16:42:46 发布

阅读量162

点赞数

文章标签： json ajax

本文链接：https://blog.csdn.net/qq_45677100/article/details/113482633

版权

Ajax笔记—day02

使用ajax—异步的javascript和xml(它是通过异步的方式，使用js来进行和后端数据的交互，发送请求，获取数据都是js做)

jquery提供的ajax–load()，使用的比较少

responseText—成功之后返回结果。

statuText—调用时候的状态码

xhr—xmlhttprequest对象。

$.ajax

$.ajax—使用的频率多

<body>
    <script>
        $(document).ready(function() {
            $("#but01").click(function() {
                htmlobj = $.ajax({
                    type: "get",
                    url: "/AjaxTest02/JqueryServlet01?name=zll&password=666",
                    async: true,
                    //为异步操作时，返回success
                    success:function(data){
                    	alert(data);
                    	 $("#div").html(data);
                    }
                });
               
            })
        })
    </script>
    <button id="but01">提交数据</button>
    <div id="div"></div>
</body>

提交json数据

<body>
    <script>
        $(document).ready(function() {
            $("#but01").click(function() {
                htmlobj = $.ajax({
                    type: "get",
                    url: "/AjaxTest02/JqueryServlet01",
                    async: true,
                    data:{
                    	name:$("#input01").val(),
                    	password:$("#input02").val()
                    },
                    dataTyoe:"json",
                    //为异步操作时，返回success
                    success:function(data){
                    	alert(data);
                    	 $("#div").html(data);//后端传递的数据
                    }
                });
               
            })
        })
    </script>
    账号<input id="input01" type="text"><br>
    密码<input id="input02" type="password"><br>
    <button id="but01">提交数据</button>
    
    <div id="div"></div>
</body>

jquery还提供了两个具体的ajax。get(),post(),它们都是指定使用哪个方式传递数据。都是客户端和服务器之间进行数据传递。

get()—从指定资源请求数据。基本上用于从服务器获得数据，可能返回缓存数据

post()—向指定的资源提交数据，处理数据。也可从服务器获取数据，但不会缓存数据，常用于连同请求一起发送数据。

Jquery $.get（url；callback）—get 方式发送数据到服务器

1.url必须指定你的参数url的位置在哪里，服务器的地址。传入参数的时候直接在url上进行加入参数即可。

2.callback是可选的，请求之后返回过来的回调函数。

Jquery $.post(url； data； callback )

1.url请求的服务器地址

2.data：连同你的url提交数据的时候要提交的真实数据。

3.callback：请求一旦成功之后回调执行的内容。

get():使用ajax的get方式请求数据

<body>
    用户姓名<input id="name" type="text"><br> 
    用户密码<input id="password" type="password"><br>
    <button id="but01">提交数据</button>
    <h1 class="h1"></h1>
    <script>
        $(document).ready(function() {
            $("#but01").click(function() {
                var name = $("#name").val();
                var password = $("#password").val();
                $.get("/AjaxTest02/JqueryServlet02?name=" + name + "&password=" + password, function(data, status) {
                    if (status == "success") {
                        $(".h1").html(data);
                    }
                })
            })
        })
    </script>
</body>

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String name=request.getParameter("name");
		String password=request.getParameter("password");
		System.out.println(name+"\t"+password);
		response.getWriter().print(name+"\t"+password);
	}

<script>
        $(document).ready(function() {
            $("#but01").click(function() {
                var name = $("#name").val();
                var password = $("#password").val();
                $.get({
                	url:"/AjaxTest02/JqueryServlet03",
                	async:true,
                	data:{
                		name:$("#name").val(),
                		password:$("#password").val(),
                	},
                	dataType:"text",
                	success:function(data){
                		alert(data);
                	}
                })
            })
        })
    </script>

post()

<script>
        $(document).ready(function() {
            $(".but").click(function() {
                var name = $(".name").val();
                var password = $(".password").val();
                $.post("/AjaxTest02/JqueryServlet03", function(data, status) {
                    alert("data:" + data + "   " + "status:" + status);
                })
            })
        })
    </script>

<script>
        $(document).ready(function() {
            $(".but").click(function() {
                var name = $(".name").val();
                var password = $(".password").val();
                $.post({
                	url:"/AjaxTest02/JqueryServlet03",
                	async:true,
                	data:{
                		name:$(".name").val(),
                		password:$(".password").val(),
                	},
                	dataType:"text",//服务器返回的数据类型
                	success:function(data){
                		alert(data);
                	}
                })
            })
        })
</script>

对于ajax来说，它的参数有：

1.url—通过ajax发送的使用地址(服务器地址)，它是String类型的数据

2.type—发送数据的时候的请求方式。(get(),post(),put(),delete()等)，String类型的数据

3.timeout—设置请求超时时间，number类型的数据

4.async—是否异步，默认为true,即异步，boolean类型的数据，要求同步时为false,同步时浏览器被锁住

5.cache—是否缓存，默认为true(缓存数据),当datatype为javascript时，cache为false,从浏览器的缓存中请求加载数据。

6.data—要发送到服务器中的数据，Object对象或String。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:“bar1”,foo2:“bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:[“bar1”,“bar2”]}转换&foo=bar1&foo=bar2。

一般我们就是写的是string类型，或者是json类型（js的对象）。

7.datatype—服务器返回的数据类型,要求为String类型的参数。他有很多的类型。

如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。

8.success—请求成功后调用的回调函数,要求为Function类型的参数，有两个参数。

(1)由服务器返回，并根据dataType参数进行处理后的数据。

(2)描述状态的字符串。

function(data, textStatus){

//data可能是xmlDoc、jsonObj、html、text等等

this; //调用本次ajax请求时传递的options参数

}

9.error—请求失败时被调用的函数。要求为Function类型的参数，该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：

function(XMLHttpRequest, textStatus, errorThrown){

//通常情况下textStatus和errorThrown只有其中一个包含信息

this; //调用本次ajax请求时传递的options参数

}

10.contentype—内容的编码类型，要求一般都是String类型。当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

后端servlet返回数据的类型

1.文本

2.html或text

3.xml

4.json

json

json是一种数据展示的格式。在正常的使用中都使用json来进行数据的交互，因为它结构简单。当前互联网上数据传输的时候就使用json来进行数据的传输。

1.json数据传输简单，自我描述性好，解析简单。layui后端ui框架就使用这个，springboot默认所有的返回内容都是json。servlet， springmvc他们都需要我们自己去把数据进行转换成json。

2.xml (他有自己的格式，有自己的标签，数据解析的时候非常麻烦，并且在网络上数据传输的时候会带着标签传递，网络传输数据量就变大了，影响速度。)

3.yamla—实现起来简单，解析快，特别适合在脚本中使用

4.yaml—比较适合做序列化的东西，直接使用就可以，boot全部的配置文件都可以写在里面

json：JavaScript 对象表示法（JavaScript Object Notation）。

json是存储和交换文本信息的语法。类似 XML。

json 比 XML 更小、更快，更易解析

js中定义的对象其实就是json格式的

<script>
        var stu = {
            name: "zll",
            age: 20,
            address: "西安",
            school: "xysf"
        }
        alert(stu.name)
    </script>

js中定义对象，并添加方法

var person = {
            name: "张三",
            age: 28,
            address: "西安",
            sex: "男",
            aa: function() {
                return this.name + "    " + this.age + "   " + this.address + "   " + this.sex
            }
        }
        alert(person.aa())

js的对象数据，并遍历

 var students = [{
            name: "zll",
            age: 20,
            address: "西安",
            school: "xysf"
        }, {
            name: "lxy",
            age: 18,
            address: "西安",
            school: "qdlg"
        }]
        for (var i in students) {
            alert(students[i].name);
            alert(students[i].age);
            alert(students[i].address);
            alert(students[i].school)
        }

javascript对象转换成json

var teacher = {
            name: "张三丰",
            age: 66,
            address: "成都"
        }
        var jsonstr = JSON.stringify(teacher);
        alert(jsonstr)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AuIgaTOk-1612088369803)(C:\Users\Administrator\Desktop\1\1-31.1.png)]$

json串转换为js的对象

 var jsonstr = JSON.stringify(teacher);
 var object = eval("(" + jsonstr + ")");
 alert(object.name)

js的对象，也是json对象，在页面上的展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title></title>
</head>

<body>
    <script>
        var data = [{
            "uid": "2688",
            "uname": "*江苏省南菁高级中学 022",
            "sum": 274.23
        }, {
            "uid": "2689",
            "uname": "*江阴国际会展中心管理有限公司 024",
            "sum": 0
        }, {
            "uid": "2686",
            "uname": "江苏申利实业股份有限公司 001",
            "sum": 7917.94
        }, {
            "uid": "2715",
            "uname": "江阴市吉达针纺有限公司 115",
            "sum": 41.39
        }, {
            "uid": "2688",
            "uname": "*江苏省南菁高级中学 022",
            "sum": 274.23
        }]

        window.onload = function() {
            var table = document.getElementById("table");
            for (var i = 0; i < data.length; i++) {
                var row = table.insertRow(table.rows.length);//创建行

                var c1 = row.insertCell(0);//创建列
                c1.innerHTML = data[i].uid;
                var c2 = row.insertCell(1);
                c2.innerHTML = data[i].uname;
                var c3 = row.insertCell(2);
                c3.innerHTML = data[i].sum;
                var c4 = row.insertCell(3);
                c4.innerHTML = "<a href=''>删除</a><a href=''>/修改</a>"
            }
        }
    </script>
    <table id="table" border="1">
        <th>用户id</th>
        <th>用户姓名</th>
        <th>用户成绩</th>
        <th>操作</th>
    </table>
</body>

</html>

最原始的把json串转换为对象，并在页面上展示

{
    "Name":"aaaa",
    "Stature":"163cm",
    "Birthday":"1985.5.30",
    "Birthplace":"heibuer",
    "Info":"aaaaaaaaaaaaaa",
    "Still":"https://cdn.www.sojson.com/study/linian.jpg"
}

页面上没有标签，要自己去写

<body>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "json.json", true);
        xhr.send(null);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var text = xhr.responseText;
                //把json串转换为对象
                var obj = JSON.parse(text);
                //把对象加入到页面标签中
                var div = document.getElementById("div");
                var h1 = document.createElement("h1"); //创建一个标签h1
                var text1 = document.createTextNode(obj.Name); //节点
                h1.appendChild(text1); //把节点中的内容放入h1标签中

                var h2 = document.createElement("h1");
                var text2 = document.createTextNode(obj.Stature);
                h2.appendChild(text2);

                var h3 = document.createElement("h1");
                var text3 = document.createTextNode(obj.Birthday);
                h3.appendChild(text3);

                var h4 = document.createElement("h1");
                var text4 = document.createTextNode(obj.Birthplace);
                h4.appendChild(text4);

                var h5 = document.createElement("h1");
                var text5 = document.createTextNode(obj.Info);
                h5.appendChild(text5);

                var h6 = document.createElement("h1");
                var text6 = document.createTextNode(obj.Still);
                h6.appendChild(text6);

                div.appendChild(h1);//把h1标签添加到div中
                div.appendChild(h2);
                div.appendChild(h3);
                div.appendChild(h4);
                div.appendChild(h5);
                div.appendChild(h6);
                
            }
        }
    </script>
    <div id="div"></div>
</body>

后端servlet返回json数据，后端中的servlet,springmvc都需要自己去进行json的转换，boot本身返回的就是json

json转换的方式

后端返回的数据如果是json数据可以使用很多种方法

传统Json方式	复杂的Json数据转换为实体类存在缺陷，性能和功能不够完善
Jackson方式	复杂的Json数据转换为实体类存在缺陷，性能和功能优于传统方式
Gson方式	功能方面最优，性能方面不如Jackson方式
FastJson方式	复杂的实体类转换为Json数据存在缺陷，解析json的速度优于其他方式

1.传统的json方式进行对象到json， json字符串到对象的转换过程

需要的jar包

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P4apnNQl-1612088369809)(C:\Users\Administrator\Desktop\1\1-31.2.png)]$

		User user=new User(12,"zll","123");
		//把对象转换为json串
		JSONObject jsonObject=new JSONObject();
		jsonObject.put("id", user.getId());
		jsonObject.put("name", user.getName());
		jsonObject.put("password", user.getPassword());
		System.out.println(jsonObject.toString());
		
		//把json串转换为对象
		String jsonString=jsonObject.toString();
		JSONObject jsonObject2=JSONObject.fromObject(jsonString);
		System.out.println(jsonObject2.getInt("id")+"\t"
				+jsonObject2.getString("name")+"\t"
				+jsonObject2.getString("password"));
		//封装到对象里
		User user2=new User(jsonObject2.getInt("id"),jsonObject2.getString("name"),jsonObject2.getString("password"));
		System.out.println(user2.getId()+"\t"+user2.getName()+"\t"+user2.getPassword());

json里存储的是集合list

		//list转换为json串		
		User user3=new User(111,"lxy","sss");
		User user4=new User(222, "zll", "999");
		List<User> list=new ArrayList<User>();
		list.add(user3);
		list.add(user4);
		JSONObject jsonObject3=new JSONObject();
		jsonObject3.put("list", list);
		System.out.println(jsonObject3.toString());

2.Jackson方式

需要的jar包

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ey9W6CAe-1612088369812)(C:\Users\Administrator\Desktop\1\1-31.3.png)]$

		//jackson方式把对象转换为json串
		User user=new User(333,"lisi","888");
		ObjectMapper objectMapper=new ObjectMapper();
		String jackstr=objectMapper.writeValueAsString(user);
		System.out.println(jackstr);
		//json串转换为对象，需要一个空的构造方法
		User user2=objectMapper.readValue(jackstr, User.class);
		System.out.println(user2.getId()+"\t"+user2.getName()+"\t"+user2.getPassword());
		//list转换为json
		User user3=new User(111,"lxy","sss");
		User user4=new User(222, "zll", "999");
		List<User> list=new ArrayList<User>();
		list.add(user3);
		list.add(user4);
		String list01=objectMapper.writeValueAsString(list);
		System.out.println(list01);

3.Gson方式

Gson是谷歌出的产品，使用的比较多

导入一个包：gson-2.3.1.jar

		//对象到json串的转换
		User user=new User(1233,"zzz","lll");
		Gson gson=new Gson();
		String jsonString=gson.toJson(user);
		System.out.println(jsonString);
		//json串到对象的转换
		User user2=gson.fromJson(jsonString, User.class);
		System.out.println(user2.getId()+"\t"+user2.getName()+"\t"+user2.getPassword());

4.FastJson方式

FastJson是阿里出的产品，使用的比较多

导入一个包：fastjson-1.2.47.jar

这个也需要一个空的构造方法

	//对象到json串
	User user=new User(777,"sss","000");
	String fastjsonString=JSON.toJSON(user).toString();
	System.out.println(fastjsonString);
	//json串到对象
	User user2=JSON.parseObject(fastjsonString,User.class);
	System.out.println(user2.getId()+"\t"+user2.getName()+"\t"+user2.getPassword());
	//数组转json串
	User user3[]= {new User(0, "zu", "10"),new User(19, "zl", "18")};
	String str=JSON.toJSON(user3).toString();
	System.out.println(str);
	//数组转json
	net.sf.json.JSONArray jsonArray=net.sf.json.JSONArray.fromObject(user3);
	System.out.println(jsonArray);
	//json到数组
	User user4=null;
	for (Object object : jsonArray) {
		user4=JSON.parseObject(object.toString(),User.class);
		System.out.println(user4.getName());

list转换为数组

		List<User> list=new ArrayList<User>();
		list.add(new User(1,"zll1","11"));
		list.add(new User(2,"zll2","12"));
		list.add(new User(3,"zll3","13"));
		list.add(new User(4,"zll4","14"));
		net.sf.json.JSONArray jsonArray=net.sf.json.JSONArray.fromObject(list);
		for (Object object : jsonArray) {
			User user=JSON.parseObject(object.toString(),User.class);
			System.out.println(user.getName());

map转换为json

		HashMap<String, Object> map=new HashMap<String, Object>();
		map.put("id", 111);
		map.put("name", "zll");
		map.put("password", "666");
		JSONObject jsonObject=JSONObject.fromObject(map);
		System.out.println(jsonObject.toString());

Zll0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax笔记---day02

Ajax笔记—day02使用ajax—异步的javascript和xml(它是通过异步的方式，使用js来进行和后端数据的交互，发送请求，获取数据都是js做)jquery提供的ajax–load()，使用的比较少responseText—成功之后返回结果。statuText—调用时候的状态码xhr—xmlhttprequest对象。$.ajax$.ajax—使用的频率多<body> <script> $(document).ready(funct
复制链接

扫一扫