首页 > 其他分享 >jQuery中AJAX(通用型方法ajax)

jQuery中AJAX(通用型方法ajax)

时间:2023-01-30 16:46:33浏览次数:51  
标签:jQuery function console ajax AJAX data response

视频

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">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/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>

JS

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
//jQuery 服务
app.all('/jquery-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});
//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});

标签:jQuery,function,console,ajax,AJAX,data,response
From: https://www.cnblogs.com/chuixulvcao/p/17076430.html

相关文章

  • jQuery中AJAX(GET&POST)
    视频HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><ti......
  • jQuery_1_封装原理
    jQuery是使用JavaScript 编写的函数库,用于简化了JavaScript编程。 问题:在一个页面中,无论是引入外部的js代码,还是内部分开写的js代码块,在此页面解析执行的时候,......
  • jquery中的load()方法
    除了web框架中自带的工具外,jquery中使用load()防止前端代码重复导航,底部标签可以放在base文件中<divclass="include"file="base.html"></div><script>$(".include").eac......
  • ython爬取异步ajax数据
      使用selenium这个网页自动化测试工具,去获得源码。因为这个工具是等到页面加载完成采取获取的整个页面的代码,所以理论上是可以获得页面完整数据的。 defreque......
  • AJAX-server.js
    //1.引入expressconstexpress=require('express');//2.创建应用对象constapp=express();//3.创建路由规则//request是对请求报文的封装//response是......
  • AJAX 超时与网络异常
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>请求超......
  • AJAX 取消请求
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>取消请......
  • AJAX 重复请求问题
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>重复请......
  • AJAX服务器响应JSON数据&设置响应体数据类型
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>JSON响......
  • AJAX IE缓存问题
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>IE缓存......