ajax学习

2021/6/29 23:21:00

编程Tag： ajax string import name 学习 user age public

本文主要是介绍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 = 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")
	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 将自动替换 ? 为正确的函数名，以执行回调函数

这篇关于ajax学习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

ajax学习

ajax学习

相关编程文章