AJAX笔记（2）-通过JQuery来使用AJAX

努力的树袋熊

已于 2023-03-22 18:05:39 修改

阅读量59

点赞数

分类专栏： AJAX 文章标签： ajax jquery javascript

于 2023-03-04 20:46:20 首次发布

本文链接：https://blog.csdn.net/qq_52225233/article/details/129338227

版权

AJAX 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该文展示了如何使用Jquery进行AJAX请求，包括GET和POST两种方式，以及通用的AJAX调用方法。在示例中，客户端通过点击按钮触发请求，向服务器发送数据并接收JSON响应。同时，服务端处理请求并返回数据，允许跨域访问。

摘要由CSDN通过智能技术生成

1.Jquery以GET和POST方式发送AJAX请求

//客户端代码
<script>
		//GET方法
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8000/jquery-server',{a:100,b:200},function(data){
                console.log(data);
            },'json')
        })
        //POST方法
        $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/jquery-server',{a:100,b:200},function(data){
                console.log(data);
            },'json')
        })
    </script>

//服务端代码
//Jquery服务
app.all('/jquery-server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
    //response.send('Hello Jquery Ajax!');
    const data = {name:'liuyang',sex:'男'};
    response.send(JSON.stringify(data));
});

2.Jquery以通用方式发送AJAX请求

$('button').eq(2).click(function(){
            $.ajax({
                url: 'http://127.0.0.1:8000/jquery-server',
                data:{a:100,b:200},
                //发送请求类型
                type:'GET',
                //响应体结果类型
                dataType:'json',
                //超时时间
                timeout:2000,
                success:function(data){
                    console.log(data);
                },
                error: function(){
                    console.log('出错啦！');
                },
                //头信息
                headers:{
                    c:300,
                    d:400
                }
            },'json');
        });