【AJAX】第四部分 jQuery中使用AJAX

【AJAX】第四部分 jQuery中使用AJAX

---

---

4. jQuery中使用AJAX

4.1 GET请求 、POST请求、通用请求

GET请求的语法：

$.get(url, [data], [callback(data)], [type])

POST请求的语法：

$.post(url, [data], [callback(data)], [type])

url：请求的路径

data：请求携带的参数

callback：成功的回调函数,其中参数表示响应体

type： 设置返回的类型，对返回值进行解析

通用的方法:

$.ajax({
			url: 'url路径',
			data: '',
			type: '',
			success:function(){},
			error:function(){},
			.
			..
			...
})

4.2 小案例

html代码

<h1>jQuery发送请求</h1>
    <hr>
    <button class="btn1">GET</button>
    <button class="btn2">POST</button>
    <button class="btn3">通用型方法</button>
    <script>
      
				//get请求
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8000/jqget',{a:100,b:200},function(data){
                console.log(data);
            })
        })
				
				//post请求
        $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/jqpost',{a:100,b:200},function(data){
                console.log(data);
            })
        })

        // 通用的方法
        $('button').eq(2).click(function(){
            $.ajax({
                // url
                url:'http://127.0.0.1:8000/jqall',

                //参数
                data:{a:100,b:200},

                //请求的类型
                type:'GET',

                //成功的回调
                success:function(data){
                    //data表示为响应体
                    console.log(data);
                },

                //超时的时间
                timeout:2000,

                //失败的回调，不管是超时，网络异常都会执行此回调
                error:function(){
                    console.log('失败啦！');
                }
            });
        })
    </script>

js代码

const express = require('express')

const app = express()

app.get('/jqget',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    response.send('我是GET请求！')
})

app.post('/jqpost',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    response.send('我是POST请求！')
})

app.all('/jqall',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    response.send('我是通用请求！')
})

app.listen('8000',()=>{
    console.log("8000端口已启动！！！");
})

---

总结

以上就是今天要讲的内容，本文介绍了在jQuery中使用AJAX，希望对大家有所帮助！