【Ajax】jQuery发送ajax请求

最新推荐文章于 2022-12-01 10:41:43 发布

CodeBoyWLC

最新推荐文章于 2022-12-01 10:41:43 发布

阅读量94

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/wlc19981111/article/details/116944560

版权

Ajax 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 发送 AJAX 请求</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求 </h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </div>

    <script>
        //为各按钮绑定事件
/*        $('button').eq(0).click(function(){
            $.get(
                'http://127.0.0.1:8000/server',  
                {a:100, b:200}, 
                  function(data){
                    console.log(data);
                    });
        });*/



        $('button').eq(0).click(function(){
            $.get(
                'http://127.0.0.1:8000/server',
                {a:100, b:200},
                function(data){
                    console.log(data);
                },
                'json'); 
        });




        //发送post请求
        $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/server',
                {a:100, b:200},
                function(data){
                console.log(data);
            });
        });





        //通用方法
        $('button').eq(2).click(function(){
            $.ajax({
                //目标url
                url: 'http://127.0.0.1:8000/server',
                //发送的参数
                data: {a:100, b:200},
                //请求类型
                type: 'GET',
                //响应体类型：自动JSON字符串→JS对象
                dataType: 'json',
                //请求成功的回调函数
                success: function(data){
                    console.log(data);
                },
                //请求超时时间
                timeout: 2000,
                //请求失败的回调函数：请求超时、网络异常等时
                error: function(){
                    console.log('出错啦!!');
                },
                //头信息
                headers: {
                    c:300,
                    d:400
                }
            });
        });

    </script>
</body>
</html>

在这里插入图片描述

CodeBoyWLC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Ajax】jQuery发送ajax请求

//1. 引入expressconst express = require('express');//2. 创建应用对象const app = express();//3. 创建路由规则：app.all('/server', (request, response) => { //设置响应头: 设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); response.setHeader('Access
复制链接

扫一扫