后端写的前端页面怎么发送数据给后端，以及解决跨域问题_如何不通过表单将前端的数据传到后端-优快云博客

在写前端的时候，因为主要是学的后端，所以前端知识非常不牢，经常在网上找文章，但他们的方法能解决他们的问题，不能解决我的，所以很长一段时间被怎么发送数据给难住，学了AJAX和axios又学的一知半解，写的代码还是不行，所以呢，我很推荐ChatGPT，我写的代码它能给我优化，不会的，提问详细一点也可以帮你写代码，真是我这种基础不算牢的人福音了，当然，ChatGPT对于太长的代码经常写不完就给你结束对话了，所以还是要你本身有一定基础才能使用好它。

//$(document).ready()方法：当DOM准备就绪时执行代码
        $(document).ready(function () {
            //$('#submit').click()方法：当id为submit的表单按钮被单击时执行代码
            $('#submit').click(function (event) {
                // 取消表单的默认提交行为
                event.preventDefault();

                // 获取表单数据
                var id = $('#id').val();
                var ability = $('#ability').val();
                var updateTime = $('#updateTime').val();
                var updateUser = $('#updateUser').val();

                // 构造请求参数,将表单数据组合成一个JSON对象requestData
                var requestData = {
                    id: id,
                    ability: ability,
                    updateTime: updateTime,
                    updateUser: updateUser
                };

                // 发送AJAX请求
                $.ajax({
                    //type: 请求方法类型（GET、POST、PUT等）
                    type: 'POST',
                    //url: 请求的URL
                    url: 'http://localhost:8080/propertyValue/select',
                    //data: 发送给服务器的数据
                    data: JSON.stringify(requestData),
                    //dataType: 从服务器返回的数据类型
                    dataType: 'json',
                    //contentType: 发送给服务器的数据类型
                    contentType: 'application/json',
                    success: function (response) {
                        // 请求成功后的处理逻辑
                        console.log(response);
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        // 请求失败后的处理逻辑
                        console.log(errorThrown);
                    }
                });
            });
        });

这是ChatGPT给我提供的解决方法，是写在javascript里面的，能解决我的表单提交类型是from类型的问题，阻止了表单的默认提交，把发送的数据写成一个对象requestData，data: JSON.stringify(requestData),这句再把对象转为json格式发送给后端。

跨域问题是前端能发送数据到后端后，经常出现的错误，这里有篇文章，可以按照他的方法解决跨域问题，解决跨域问题的文章，但是这个方法的允许跨域的路径是*，也就是允许所有的请求都可以通过，实际开发是不允许的，但这是后端写的嘛，也就无所谓了，只是让你写的页面能把数据发给后端而已，不安全就不安全吧，方便嘛，反正目的是后端程序能跑通，以防文章失效，还是贴一份代码。

@Configuration
public class CORSConfig implements WebMvcConfigurer {

    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许cookie
                .allowCredentials(true)
                // 设置允许的请求方式
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                // 设置允许的header属性
                .allowedHeaders("*")
                // 跨域允许时间
                .maxAge(3600);
    }
}

这是写在后端的，放在config或者util文件夹里面吧，方便找，复制上去就完了，有@Configuration注解会自动给你装配的。

顺便提一嘴，在2023年3月21日有了第一个粉丝，虽然可能随时会取关吧(笑)，毕竟我写的文章感觉都挺一般的，只是没想到这么一般的文章都有关注的人是确实没想到的，这条段落就当个纪念吧，不然我都没打算写这篇文章的，只是想到还是有人在看呢，能帮一个是一个吧。