jQuery发送Ajax请求

HTML代码

1
2
3

<h2 id="url2">看我看我</h2>
url:<input type="text" required="required" id="url1">
<a href="javascript:click()"><button>点击</button></a>

JavaScript代码

function click() {
	var urlStr = $("#url1").val();
	if (urlStr == null || urlStr == '') {
		alert("请输入链接!!");
		return false;
	}
	$.ajax({
		url: "/blog/getJson",
		type: "post",
		data: {urlStr: urlStr},
		success: function (result) {
			var obj = JSON.parse(result);
			$("#url2").html(obj.name + " : " + obj.url);
			$("#url2").attr("style", "color:red");
		},
	});
}

Java代码

Link实体类（已省略setter和getter方法）

package com.ledao.entity;

/**
 * 友情链接实体
 *
 * @author LeDao
 * @company
 * @create 2021-02-03 17:54
 */
public class Link {

    /**
     * 编号
     */
    private Integer id;
    /**
     * 名称
     */
    private String name;
    /**
     * 链接地址
     */
    private String url;
    /**
     * 排列序号
     */
    private Integer sortNum;

    @Override
    public String toString() {
        return "Link{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", url='" + url + '\'' +
                ", sortNum=" + sortNum +
                '}';
    }
}

请求的方法getJson()

@ResponseBody
@RequestMapping("/getJson")
public String getJson(String urlStr) {
	Link link = new Link();
	link.setId(1);
	link.setName("LeDao的博客");
	link.setUrl(urlStr);
	link.setSortNum(1);
	Gson gson = new Gson();
	String jsonString = gson.toJson(link);
	return jsonString;
}

参数说明

序号	参数	说明
1	url	String 类型参数，发送请求的地址
2	type	String 类型参数，设置请求方式（ GET、POST、PUT、DELETE ）
3	timeout	Number类型参数，设置请求超时时间（毫秒）
4	async	Boolean 类型参数，默认设置为 true，当为 true 表示发送异步请求，当为 false 表示发送同步请求
5	cache	Boolean 类型参数，默认设置为 true 默认为 true（当 dataType 为 script 时，默认为 false ），设置为false将不会从浏览器缓存中加载请求信息
6	data	Object 或 String 类型的参数，发送请求的参数，如果是 GET 方式则以 ? & 形式拼接到 url 中，如果是 POST 方式则将数据放在 FormData 中
7	dataType	String类型的参数，指定服务器返回的数据类型 xml：返回XML文档 html：返回纯文本HTML信息 script：返回纯文本JavaScript代码 json：返回JSON数据 jsonp：JSONP格式 text：返回纯文本字符串
8	beforeSend	Function 类型参数，发送请求前可以修改 XMLHttpRequest 对象的函数，例如添加自定义 HTTP 头
9	complete	Function 类型参数，请求完成后调用的回调函数（请求成功或失败时均调用）
10	success	Function 类型参数，请求成功的回调函数
11	error	Function 类型参数，请求失败的回调函数
12	contentType	String 类型参数，当发送信息至服务器时，内容编码类型默认为”application/x-www-form-urlencoded”
13	dataFilter	Function类型参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理function(data, type){ //返回处理后的数据 return data; }
14	global	Boolean 类型参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件
15	ifModified	Boolean 类型参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息
16	jsonp	String 类型参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分，例如{jsonp:’onJsonPLoad’}会导致将”onJsonPLoad=?”传给服务器
17	username	String 类型参数，用于响应HTTP访问认证请求的用户名
18	password	String 类型参数，用于响应HTTP访问认证请求的密码
19	processData	Boolean 类型参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型”application/x-www-form-urlencoded”。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false
20	scriptCharset	String 类型参数，只有当请求时dataType为”jsonp”或者”script”，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用