[JavaScript知识库] jquery的ajax请求

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> jquery的ajax请求 -> 正文阅读

[JavaScript知识库]jquery的ajax请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery.js"></script>
</head>

<body>
    <button id="get">GET</button>
    <button id="post">POST</button>
    <button id="fangfa">通用型方法ajax</button>
    <script>
        $(function () {
            $("#get").click(function () {
                $.get('http://127.0.0.1:8000/jquery', { a: 100, b: 200 }, function (data) {
                    console.log(data);
                })
            })
            $("#post").click(function () {
                $.post('http://127.0.0.1:8000/jquery', { a: 100, b: 200 }, function (data) {
                    console.log(data);
                },'json')
            })
            $("#fangfa").click(function(){
                $.ajax({
                    // url
                    url:"http://127.0.0.1:8000/jquery",
                    // 参数data
                    data:{a:100,b:200},
                    // 响应体结果
                    dataType:'json',
                    // 请求类型
                    type:'GET',
                    // 成功的回调
                    success:function(data){
                        console.log(data);
                    },
                    // 超时时间
                    timeout:2000,
                    // 失败回调
                    error:function(){
                        console.log("出错了");
                    },
                    // 头信息
                    // headers:{
                    //     a:100
                    // }
                })
            })
        })
    </script>
</body>

</html>

使用node开发服务器

const express = require('express')
const app = express();

app.get('/server', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin','*')
    // res.send({name:'zx',age:20,gender:"男"})
    res.send("asdasd")
})
app.get('/ie', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin','*')
    // res.send({name:'zx',age:20,gender:"男"})
    res.send("htllo i111e")
})
app.post('/server',(req,res)=>{
    res.setHeader('Access-Control-Allow-Origin','*')
    res.send('post')
})
// 延时处理
app.get('/delay', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin','*')
    // res.send({name:'zx',age:20,gender:"男"})
    setTimeout(()=>{
        res.send("delay")
    },3000)
   
})


// jquery
// 延时处理
app.get('/jquery', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin','*')
    // res.send({name:'zx',age:20,gender:"男"})
   
    res.send({name:"get"})

   
})
app.post('/jquery', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin','*')
    // res.send({name:'zx',age:20,gender:"男"})
   
        res.send({name:"123post"})

})
app.listen(8000, () => {
    console.log("启动成功");
})

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2022-03-06 12:53:24 更:2022-03-06 12:55:36

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 8:57:21-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码