前后端交互之ajax

之前自己做了一个小东西,用的laravel框架,最开始在公司是前后端分离,只写接口,所以不清楚前端是如何接的。
我的前端实现部分主要是js,而且需要接后端返回的数据,于是查了一下需要用ajax。最开始不清楚后端要返回什么类型的结果,因为在公司返回的是一个json,所以先试了下json
return response()->json();
而js里用的$.get()方法,问题来了,参数只写了一个url,确实能获取到数据,但是是一个对象,想要的数据只是该对象的一个属性。试了很多方法,无法拿到。

改了了下,不转json了,直接ruturn结果。

$.ajax({
        url:'/get_fees',
        success:function (data) {
            fees = data;
            //alert(data);
            $.each(fees,function (index,value) {
                //alert(index+":"+value);
                switch (value.name)
                {
                    case 'a_week':
                        a_week = value.fee;
                        break;
                    case 'a_month':
                        a_month = value.fee;
                        break;
                    case 'three_month':
                        three_month = value.fee;
                        break;
                    case 'six_month':
                        six_month = value.fee;
                        break;
                }
            })
        }
    })

其实只要url匹配了,数据就已经传到了,只是不会用。通过each遍历数组拿到对象就好办了。

前后端交互Ajax是一种用于实现异步请求的技术。它通过在前端使用JavaScript代码发送HTTP请求到后端,并处理后端返回的数据,实现了前后端的数据交互。 使用Ajax进行前后端交互的步骤如下: 1. 创建一个XMLHttpRequest对象,并使用open方法指定请求的方式、URL和是否异步。 2. 设置onreadystatechange事件处理函数,监听Ajax请求的状态变化。 3. 在事件处理函数中,判断请求的状态和返回的状态码,根据需要执行相应的操作。 4. 最后,使用send方法发送请求。 Ajax的优点是可以在不刷新整个页面的情况下获取后端数据,并将其实时显示给用户,提高了用户体验。同时,Ajax可以实现异步请求,不会阻塞页面的其他操作,提高了页面的性能和效率。 然而,Ajax也有一些缺点。首先,由于Ajax请求是异步进行的,因此在处理跨域请求时需要进行额外的处理。其次,Ajax请求增加了前端的复杂性,需要编写更多的代码来处理请求和响应的逻辑。 总结来说,Ajax是一种用于实现前后端数据交互的技术,通过异步请求和处理后端返回的数据,提高了用户体验并提供了更好的页面性能。同时,Ajax也带来了一些额外的复杂性和跨域请求的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [前端与后端数据交互的方式之ajax](https://blog.csdn.net/a3354402180/article/details/101948344)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [前后端交互工具---ajax](https://blog.csdn.net/m0_61480985/article/details/128444893)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值