ajax学习

最新推荐文章于 2024-07-27 17:56:15 发布

薛之傲

最新推荐文章于 2024-07-27 17:56:15 发布

阅读量458

点赞数

文章标签： ajax java

本文链接：https://blog.csdn.net/qq_46454379/article/details/118345750

版权

ajax学习

搭建环境

编写pojo层

package com.tx.pojo;

import java.io.Serializable;

public class User implements Serializable{
	private String name;
	private String age;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getAge() {
		return age;
	}
	public void setAge(String age) {
		this.age = age;
	}
	public User() {
		
	}
	public User(String name,String age) {
		this.age=age;
		this.name=name;
	}
}

编写Controller层

package com.tx.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.tx.pojo.User;

@RequestMapping("/h")//代表上级地址
@Controller//代表这个类会被Spring接管
//被这个注解的类，中所有的方法，如果返回值是String，并且有具体页面可以跳转，那么就会被视图解析器解析
public class HelloController {
	@RequestMapping("/a1")
	@ResponseBody//注解的作用是将controller的方法返回的对象通过适当的转换器转换为指定的格式之后，写入到response对象的body区，通常用来返回JSON数据或者是XML数据。
	public List<User> ajax1(@RequestParam("name")String name){
		User u=new User("薛之傲","18");
		User u2=new User("戴稳弱","19");
		List<User> ulist=new ArrayList<User>();
		ulist.add(u);
		ulist.add(u2);
        System.out.println(name);//将前端传来的数据打印
		return ulist;
	}
}

下载jquery脚本https://jquery.com/download/

编写jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.6.0.js"></script>//导入jquery包
</head>
<body>
	<input type="button" id="btn" value="查看数据">
	<table>
	<tr><td>姓名</td><td>年龄</td></tr>
	<tbody id="user"></tbody>
	</table>
</body>
</html>

编写axaj方法实现前后端数据交互

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#btn").click(function(){
	$.ajax({
		url:'${pageContext.request.contextPath}/h/a1',//跳转后台的地址
		method:'post',//请求方式
		data:{name:"tx"},//传递数据到后台
		success:function(res){//回调函数
			console.log(res);//将后台传递的数据打印在控制台
			var html="";
			for(var i=0;i<res.length;i++){
				html=html+"<tr>"+"<td>"+res[i].name+"</td>"+
				"<td>"+res[i].age+"</td>"+"</tr>";
			}
			$("#user").html(html);
		}
	})
});
});
</script>
</head>
<body>
	<input type="button" id="btn" value="查看数据">
	<table>
	<tr><td>姓名</td><td>年龄</td></tr>
	<tbody id="user"></tbody>
	</table>
</body>
</html>

开始运行！
在这里插入图片描述

数据交互成功！！！

jQuery.ajax(…)方法参数

jQuery.ajax(...)
      部分参数：
            url：请求地址
            type：请求方式，GET、POST（1.9.0之后用method）
        headers：请求头
            data：要发送的数据
    contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
          async：是否异步
        timeout：设置请求超时时间（毫秒）
      beforeSend：发送请求前执行的函数(全局)
        complete：完成之后执行的回调函数(全局)
        success：成功之后执行的回调函数(全局)
          error：失败之后执行的回调函数(全局)
        accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型
        dataType：将服务器端返回的数据转换成指定类型
          "xml": 将服务器端返回的内容转换成xml格式
          "text": 将服务器端返回的内容转换成普通文本格式
          "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
        "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
          "json": 将服务器端返回的内容转换成相应的JavaScript对象
        "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

薛之傲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
ajax学习

ajax学习搭建环境编写pojo层package com.tx.pojo;import java.io.Serializable;public class User implements Serializable{ private String name; private String age; public String getName() { return name; } public void setName(String name) { this.name = nam
复制链接

扫一扫