• jQuery 中的 AJAX（1 get 请求，2 post 请求，3 通用方法ajax）

    jQuery 中的 AJAX

    目标：点击GET按钮发送get请求，点击POST按钮发送post请求，点击通用型方法ajax用通用方式去发送

    eg.client.html

    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">GETbutton>
        <button class="btn btn-danger">POSTbutton>
        <button class="btn btn-info">通用型方法ajaxbutton>
    div>
    <script>
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
                console.log(data);
            },'json');
        });

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

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

    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    server.js部分

    // jQuery服务
app.all('/jquery-server', (request, response)=>{
  // 设置响应头  设置允许跨域  
  // 头的名字(Access-Control-Allow-Origin) 头的值(*)
  response.setHeader('Access-Control-Allow-Origin','*');
  response.setHeader('Access-Control-Allow-Headers','*');

  const data = {name: '尚硅谷'};
  // response.send('Hello jQuery AJAX');
  response.send(JSON.stringify(data));
});


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    在这里插入图片描述

    其中：
    1 get 请求
    $.get(url, [data], [callback], [type])
    url:请求的 URL 地址。
    data:请求携带的参数。
    callback:载入成功时回调函数。
    type:设置返回内容格式，xml, html, script, json, text, _default

    2 post 请求
    $.post(url, [data], [callback], [type])
    url:请求的 URL 地址。
    data:请求携带的参数。
    callback:载入成功时回调函数。
    type:设置返回内容格式，xml, html, script, json, text, _default

    3 通用方法ajax

    一般get/post请求就用前两种方法，如果自定义较强就用第三种方法

  • 相关阅读:
    K8S | Deployment应用编排
    从零开始学HCIA之IPv6基础04
    Angular-07:组件生命周期
    我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：面向人群和教程特点
    angular之formgroup
    15【存储过程和存储函数】
    Android so库中UnsatisfiedLinkError
    银行业数据分析算法应用汇总
    GPU是什么？有多大的用处？
    QT制作简易时钟
  • 原文地址：https://blog.csdn.net/weixin_51249285/article/details/126349211