React中使用ajax获取数据在移动浏览器中不显示问题
React中使用ajax获取数据在移动浏览器中不显示问题
fanzhh
发布于 2019-08-20 11:25:55
发布于 2019-08-20 11:25:55
这个问题困扰了我半个月的时间，今天终于解决了。
在做的一个小项目，页面加载后使用ajax读取本地REST数据，保存在状态中，稍后在form的选择下拉框中显示，代码如下：
150 componentDidMount() {
151 var that = this;
152 const url = 'http://localhost/api/grads/';
153 $.ajax({
154 headers:{
155 'Content-Type':'application/json',
156 },
157 url: url,
158 type:"GET",
159 dataType:"json",
160 data:{},
161 success: function(result){
162 that.setState({grades:result,})
163 },
164 error: function(xhr, status,err){
165 console.log(err.Message);
166 },
167 })
168 }奇怪的是，运行时在电脑端谷歌、火狐浏览器访问，数据都能加载，在手机端使用谷歌浏览器访问，选择下拉框始终为空，这说明手机端浏览器ajax获取数据时出了问题。
今天偶然在stackoverflow上这个帖子里终于找到了解决办法，修改后代码如下：
150 componentDidMount() {
151 var that = this;
152 const url = 'http://localhost/api/grads/';
153 $(function(){$.ajax({ // 此处添加$(function(){
154 headers:{
155 'Content-Type':'application/json',
156 },
157 url: url,
158 type:"GET",
159 dataType:"json",
160 data:{},
161 success: function(result){
162 that.setState({grades:result,})
163 },
164 error: function(xhr, status,err){
165 console.log(err.Message);
166 },
167 })}) // 此处添加})
168 }修改后手机谷歌浏览器显示正常。这个$(function(){}的功能何在？
javascript中$(function() {....}) 是 jQuery 中的经典用法，等同于 $(document).ready(function() {....})，即在页面加载完成后才执行某个函数，如果函数中要操作 DOM，在页面加载完成后再执行会更安全，所以在使用 jQuery 时这样的写法很常见。
$(document).ready() 里的代码是在页面内容都加载完才执行的，如果把代码直接写到script标签里，当页面加载完这个script标签就会执行里边的代码了，此时如果你标签里执行的代码调用了当前还没加载过来的代码或者dom，那么就会报错，当然如果你把script标签放到页面最后面那么就没问题了，此时和ready效果一样。
$(document).ready(function(){})可以简写成$(function(){});
可参考jquery此处的官方文档。
可能的原因是手机端刘览器与电脑端浏览器页面加载中处理脚本时间不同，前者是未等页面加载结束即执行jquery脚本，后者则相反，所以后者不需$(function(){}也可正常显示。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.01.29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读