首页 > 其他分享 >jQuery中AJAX(GET&POST)

jQuery中AJAX(GET&POST)

时间:2023-01-30 16:33:38浏览次数:57  
标签:jQuery function express AJAX POST 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);
            });
        });

    </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,express,AJAX,POST,data,response
From: https://www.cnblogs.com/chuixulvcao/p/17076405.html

相关文章

  • wdb应用模式、API接口、接口测试工具postman
    wdb应用模式、API接口、接口测试工具postman一、wdb应用模式#djangoweb框架,专门用来写web项目#前后端混合开发 后端人员,写后端,也要写【模板语法】---》xx.html的py......
  • jQuery_1_封装原理
    jQuery是使用JavaScript 编写的函数库,用于简化了JavaScript编程。 问题:在一个页面中,无论是引入外部的js代码,还是内部分开写的js代码块,在此页面解析执行的时候,......
  • get post
    #getdefdetail(request,cat_id,dog_id):'''127.0.0.1:8000/1/200?user=gyb&password=1231,200就是参数1,2即cat_id,和dog_id接收的信息?后......
  • jquery中的load()方法
    除了web框架中自带的工具外,jquery中使用load()防止前端代码重复导航,底部标签可以放在base文件中<divclass="include"file="base.html"></div><script>$(".include").eac......
  • 公司规定所有接口都用 post 请求,这正确么?
    目录背景get与post的区别所有接口都用post请求?背景最近在逛知乎的时候发现一个有趣的问题:公司规定所有接口都用post请求,这是为什么?看到这个问题的时候其实......
  • ython爬取异步ajax数据
      使用selenium这个网页自动化测试工具,去获得源码。因为这个工具是等到页面加载完成采取获取的整个页面的代码,所以理论上是可以获得页面完整数据的。 defreque......
  • Apipost和Apifox网上说了这么多,今天我们亲自测评!
    百闻不如一试,网络上铺天盖地的文章,各说各的好,其实这样很容易误导我们这些想采用他们私有化的团队,apipost和apifox都是我们想采用私有化的API管理工具,但是这几天搜了一圈,感觉......
  • postman-snippet-curl(postman请求转换bash curl请求)
    概述postman作为接口测试,很方便也支持copysnippet(代码片段)postman介绍请求界面post请求配置从postman请求导出curlpostmanrequest->右侧code(</>)->codesn......
  • AJAX-server.js
    //1.引入expressconstexpress=require('express');//2.创建应用对象constapp=express();//3.创建路由规则//request是对请求报文的封装//response是......
  • postman简单使用
    1.url:http://api.lemonban.com/futureload注册接口:http://api.lemonban.com/futureload/member/register参数:mobile_phone,pwd登录接口:http://api.lemonban.com/f......