首页 > 其他分享 >AJAX jQuery发送jsonp请求

AJAX jQuery发送jsonp请求

时间:2023-01-30 20:23:07浏览次数:57  
标签:jQuery app express AJAX jsonp 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-jsonp</title>
    <style>
        #result{
            width:300px;
            height:100px;
            border:solid 1px #089;
        }
    </style>
    <script crossorigin="anonymous" src='https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js'></script>
</head>
<body>
    <button>点击发送 jsonp 请求</button>
    <div id="result">

    </div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data){
                $('#result').html(`
                    名称: ${data.name}<br>
                    校区: ${data.city}
                `)
            });
        });
    </script>
</body>
</html>

JS

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

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

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.all('/jquery-jsonp-server',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name:'尚硅谷',
        city: ['北京','上海','深圳']
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //接收 callback 参数
    let cb = request.query.callback;

    //返回结果
    response.end(`${cb}(${str})`);
});
//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});

标签:jQuery,app,express,AJAX,jsonp,data,response
From: https://www.cnblogs.com/chuixulvcao/p/17077163.html

相关文章

  • jQuery基础学习随笔 2023
    jQuery多库共存//1.如果$符号冲突,就使用jQueryconsole.log(jQuery("div"));//$("div")//......
  • AJAX jsonp实现原理
    视频script标签处理函数调用,handle(),在html中实现handle(),在js中返回'handle()'字符串从而实现跨域。HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset......
  • AJAX同源策略演示
    HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>......
  • JQuery概念以及快速入门
    JQuery概念概念:一个JAVAScript框架jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)。jQuery设计的宗旨是“writeLes......
  • Axios发送AJAX请求(通用方法型ajax)
    视频HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><t......
  • jQuery中AJAX(通用型方法ajax)
    视频HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><ti......
  • 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代码块,在此页面解析执行的时候,......
  • 接口自动化框架两大神器-正则提取器和Jsonpath提取器
    一接口自动化框架一框架结构二结构说明-API用于封装被测系统的接口(用request模块封装的请求方法)-TestCase将一个或多个接口封装成测试用例,并使用UnitTest管理......
  • jquery中的load()方法
    除了web框架中自带的工具外,jquery中使用load()防止前端代码重复导航,底部标签可以放在base文件中<divclass="include"file="base.html"></div><script>$(".include").eac......