你不得不知道的jQuery基础之ajax（1）

最新推荐文章于 2021-08-06 16:56:25 发布

TomLazy

最新推荐文章于 2021-08-06 16:56:25 发布

阅读量118

点赞数

分类专栏：日常学习文章标签： jquery ajax JSONObject

本文链接：https://blog.csdn.net/qq_41071754/article/details/108694815

版权

日常学习专栏收录该内容

82 篇文章 8 订阅

订阅专栏

XML：数据格式严谨，安全性高，传输效率慢

ajax：

1、ajax的使用

$.ajax({
    async: true,
    type: "POST",
    dataType: "json",
    data: "name=" + "hello",
    url: "/helloServlet"
    success:function(data){
        $(selector).css()..
    }
    error:function(data){
        $()...
    }
});

在后端：使用Servlet接收ajax请求，并且将数据封装成json格式回传给前台页面

JSON：

1. json是js默认的数据格式，js中直接提供了解析json数据的相关函数
2、数据格式小（相对XML而言），可以节省网络资源

{
   	 "array1": [
         { "name":"菜鸟教程" , "url":"www.runoob.com" }, 
         { "name":"google" , "url":"www.google.com" }, 
         { "name":"微博" , "url":"www.weibo.com" }
   	 ]
 }

依赖包：

JSON-lib-2.4.jar

在java程序中可以直接将Java的集合对象通过简单的编程转换为JSON格式的字符串

List<Map> List<User>

Map

Array

ezmorph-1.0.6
commons-logging-1.2
commons-lang-2.6
commons-collections-3.2.1
commons-beanututils-1.9.3

Maven依赖库：https://mvnrepository.com/

1. pom.xml
2. 下载

XML：数据格式严谨，安全性高，传输效率慢

<tag>
    <sub1 name = "xxx">
        <sub2 name = "x1">data1</sub2>
        <sub3 name = "x2">data2</sub3>
        <sub4 name = "x3">data3</sub4>
    </sub1>
    <sub5>
        <sub2>data4</sub2>
        <sub3>data5</sub3>
        <sub4>data6</sub4>
    </sub5>
</tag>

在前端：将json格式的数据进行拆解，对页面进行重构（页面样式、页面数据）

2、ajax的属性

async：布尔值，表示请求是否异步处理，默认是true 页面刷新代表同步，不刷新代表异步
context
data
dataType： Json、xml
type：规定请求的类型 get or post
url：规定发送请求的URL，默认当前页面
xhr：xml对象

3、ajax实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax测试</title>
</head>
<body>
	<!-- 
		业务需求：
			1. 在页面输入一段文本 10
			2. 通过jquery ajax 将 输入文本传入后台Servlet
			3. Servlet对前台数据进行接收并处理（10+5）
			4. 将处理结果异步刷新至p标签
	 -->
	输入<input id = "ipt1">
	<p id = "p01">默认数据...</p>
	<button id = "btn01">ajax测试</button>
	<script type = "text/javascript" src = "js/jquery-3.4.1.js"></script>
	<script>
		$("#btn01").click(function(){
			var data01 = $("#ipt1").val();
			
			// ajax请求
			$.ajax({
				type: "post",
				async: true,
				dataType: "json",
				data: "d01=" + data01,
				url: "jsonTest",
				success: function(data){
					$("#p01").empty();
					$("#p01").html(data);
 				}
			});
			
			
		});
	</script>

</body>
</html>

package com.sk;

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 net.sf.json.JSONObject;

public class JSONTestServlet extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		//1. 获取前台数据
		String param = request.getParameter("d01");
		int p = 0;
		if(param != null){
			p = Integer.parseInt(param);
		}
		System.out.println(p);
		
		//2. 处理数据： p += 5
		p += 5;
		
		//3. 数据回传
		JSONObject jObject = new JSONObject();
		
		/*
		 *  JSONObject 可以完成的功能
		 * 		1. XML -> JSON
		 * 		2. JSON -> XML
		 * 		3. String -> JSON
		 * 		4. JSON -> String
		 */
		PrintWriter out = response.getWriter();
		jObject.put("k01", p);
		
		// User user = new User();
		// jObject.fromObject(user); // javaBean -> Json
		// out.write(jObject.toString());
		 System.out.println(jObject.getString("k01"));
		out.write(jObject.getString("k01"));
		out.flush();
		
		
	}
}

实例效果图：

实例效果图

4、补充资料

集合类输出格式

以下罗列各种常用的集合类，利用System.out.println()打印后的格式显示，以便在组装数据时方便脚本输入测试。

数组类型

    String[] s = new String[5];
    s[0] = "1";
    s[1] = "2";
    s[2] = "3";
    s[3] = "4";
    System.out.println(Arrays.toString(s));

输出结果：[1, 2, 3, 4, null]

List类型

        List<String> list = new ArrayList<>();
        list.add("John");
        list.add("Mike");
        list.add("Lisa");
        System.out.println(list);

输出结果：[John, Mike, Lisa]

Set类型

        Set<String> set = new HashSet<>();
        set.add("John");
        set.add("Mike");
        set.add("Lisa");
        System.out.println(set);

输出结果：[Mike, John, Lisa]

Map类型

        Map<String, String> map = new HashMap<>();
        map.put("name1", "John");
        map.put("name2", "Mike");
        map.put("name3", "Lisa");
        System.out.println(map);

输出结果：{name3=Lisa, name2=Mike, name1=John}

JSONObject类型

        JSONObject jObject = new JSONObject();
        jObject.put("name1", "John");
        jObject.put("name2", "Mike");
        jObject.put("name3", "Lisa");
        System.out.println(jObject);

输出结果：{“name3”:”Lisa”,”name2”:”Mike”,”name1”:”John”}

JSONArray类型

        JSONArray jArray = new JSONArray();
        jArray.put("John");
        jArray.put("Mike");
        jArray.put("Lisa");
        System.out.println(jArray);

输出结果：[“John”,”Mike”,”Lisa”]

TomLazy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
你不得不知道的jQuery基础之ajax（1）

目录ajax：1、ajax的使用JSON：依赖包：XML：数据格式严谨，安全性高，传输效率慢2、ajax的属性ajax：1、ajax的使用$.ajax({ async: true, type: "POST", dataType: "json", data: "name=" + "hello", url: "/helloServlet" success:function(data){ $(selector).
复制链接

扫一扫