什么是ajax,一篇文章带你了解ajax(JQ的ajax封装讲解)

一:什么是ajax

  ajax是异步编程,可以让用户不用刷新页面就可以访问到服务器的数据,比如我们常见的今日头条,打开一个页面他页面中的数据并不是很多,但是我们在不停向下滚动的时候,我们并没有刷新页面,但是页面中的数据好像无穷一样,这就是ajax的作用。

二:JQ中ajax的方法讲解

  // ajax读取本地的文件
        $.ajax({
        	//async是规定是否异步处理(默认是true)
        	async:true,
        	//type规定请求类型,只有GET和POST两种
            type:"GET",
            //url是请求的路径,这里因为请求的是本地文件使用了相对路径
            url:"test.json",
            //dataType规定返回数据格式,有时候我们请求没有错误但是他依然进入error里边可以就是因为返回的数据格式不是JSON格式
            dataType:"JSON",
            //data是我们要传的值,里传的是一个对象(因为这里我们并不需要传值,所以就把值注掉了)
            data:{
            //name:123
            },
            //success是请求成功后执行的函数
            success:function(result){
                console.log(result)
            },
            //error是请求失败之后执行的函数
            error:function(err){
                console.log(err)
            }
        })

什么是ajax,一篇文章带你了解ajax(JQ的ajax封装讲解)_第1张图片
什么是ajax,一篇文章带你了解ajax(JQ的ajax封装讲解)_第2张图片

//这是JSON文件里边的内容
{
    "first":[
        {"id":"1","sex":"男"},
        {"id":"2","sex":"男"},
        {"id":"3","sex":"男"},
        {"id":"4","sex":"女"}
    ]
}

三:可能遇到问题解释

因为我们访问的是本地的文件,可能会出现跨域的错误
错误提示
如果使用vscode打开的可以使用Live Server插件打开,就不会报错了。

四:其他问题的分享

之前在使用ajax上传文件的时候一直报错,之后百度了一下,上传文件的时候需要加上这两句

 contentType: false,
  // 告诉jQuery不要去设置Content-Type请求头
  processData: false,
  // 告诉jQuery不要去处理发送的数据

结语:

这次的分享就到这里了,还有什么不会的可以留言,而且都看到这里了,不妨留个赞再走呗!

你可能感兴趣的:(总结,ajax,javascript,ecmascript)