JQuery发送AJAX请求

杨沃宇

已于 2023-04-01 14:43:49 修改

阅读量1.7k

点赞数

文章标签： ajax jquery javascript

于 2023-04-01 14:41:11 首次发布

本文链接：https://blog.youkuaiyun.com/gcsyzy/article/details/129896161

版权

这篇博客详细介绍了如何使用JQuery发送AJAX请求，包括GET和POST方式，以及适用于特殊需求的jQuery.ajax()方法。同时，文章还讨论了AJAX的优点，如不刷新页面更新内容，并提供了前台HTML和JavaScript的示例代码，以及服务端express的配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一说明

1.JQuery发送AJAX请求的三种方式

$.get()：形式$.get(url,data,func,dataType)，该方法使用GET方式执行Ajax请求，从服务器加载数据；
$.post()：形式$.post(url,data,func,dataType)，该方法使用POST方式执行Ajax请求，从服务器加载数据；

$.ajax()：该方法用于执行Ajax请求，常用于其他jQuery Ajax方法不能完成的请求。

2.AJAX优点

不刷新页面更新网页；在页面加载后从服务器请求数据；在页面加载后从服务器接收数据；在后台向服务器发送数据。

二前台部分

1.引入JQuery

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

2.HTML代码

<body>
    <button>GET方法</button>
    <button>POST方法</button>
    <button>AJAX方法</button>
<body>

3.JavaScript代码

<script>
        // 处理GET方法请求
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:9090/jquery',{a:100,b:2},function(data){
                console.log(data);
            },'json')
        })
        // 处理POST方法请求
        $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:9090/jquery',{a:100,b:10021},function(data){
                console.log(data);
            })
        })
        // 处理AJAX方法请求
        $('button').eq(2).click(function(){
            $.ajax({
                // URL
                url: 'http://127.0.0.1:9090/jquery',
                // 参数
                data: {a:100,b:12},
                // 请求类型
                type: 'get',
                // 响应体结果类型
                dataType: 'json',
                // 成功回调
                success: function(data){
                    console.log(data)
                },
                // 超时时间
                timeout: 2000,
                // 错误回调
                error: function(){
                    console.log('出错了..')
                },
                headers: {
                    c: 3030,
                    d: 31321,
                }
            })
        })
    </script>

三服务端部分

1.安装 express

npm install express

2.服务端 server.js 代码

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则: jQuery服务
app.all('/jquery',(request,response)=>{
    // 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    // 响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    const data = {
        name: 'gcsyzy',
    }
    // 设置响应体
    response.send(JSON.stringify(data));
})
// 4.监听端口启动服务
app.listen(9090,()=>{
    console.log('服务已启动，9090端口监听中...')
})