后端写的前端页面怎么发送数据给后端,以及解决跨域问题

在写前端的时候,因为主要是学的后端,所以前端知识非常不牢,经常在网上找文章,但他们的方法能解决他们的问题,不能解决我的,所以很长一段时间被怎么发送数据给难住,学了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日有了第一个粉丝,虽然可能随时会取关吧(笑),毕竟我写的文章感觉都挺一般的,只是没想到这么一般的文章都有关注的人是确实没想到的,这条段落就当个纪念吧,不然我都没打算写这篇文章的,只是想到还是有人在看呢,能帮一个是一个吧。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值