jquery的ajax请求

最新推荐文章于 2024-07-23 11:45:00 发布
最新推荐文章于 2024-07-23 11:45:00 发布
阅读量374 收藏
点赞数
分类专栏： jquery 文章标签： mysql 数据库 database
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/deep_zhuheihei/article/details/123283043
版权 
<!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("启动成功");
})
碑无名
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jquery ajax参数详解
冲出仁川，走出马德里，故事还会再继续
01-10 1387
Jquery中的AJAX参数 url,[settings] url:一个用来包含发送请求的URL字符串。 settings:AJAX 请求设置。所有选项都是可选的。 settings：选项 accepts type:Map 默认： 取决于数据类型。 内容类型发送请求头，告诉服务器什么样的响应会接受返回。如果accepts设置需要修改，推荐在$.ajaxSetup()方法中做一次。 async type:boolean (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将
jquery实现Ajax请求
qq_51635297的博客
11-09 7882
jquery实现Ajax请求
jquery的函数实现Ajax
兮遥
08-21 1081
1、$.ajax() $.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。 语法： $.ajax( { name:value, name:value, ... } ) async ： 布尔值，表示请求是否异步处理。默认是 true (可以不写) contentType ：发送数据到服务器时所使用的内容类型。默认是"application/x-www-form-urlencoded"。 data：规定要发送到服务器的数据，可...
jquery中的ajax请求方式的写法 & 重要且常用参数的释义 & ajax返回值，return获取不到数据值
weixin_44867717的博客
12-03 2451
ajax
【AJAX 教程】Jquery 实现 AJAX 请求的三种方式
我的博客
05-23 3374
Jquery 实现 AJAX 请求的三种方式 目录 Jquery 实现 AJAX 请求的三种方式 简介 项目准备 $.get()方法 $.post()方法 $.ajax()方法 项目演示 相关文章【AJAX 教程】JS 原生 AJAX 请求 简介 JQuery 脚本库里所提供的 AJAX 提交的方法有很多，但主要的方法有 $.get(), $.post(), $.ajax()。其中 $.ajax() 是前两种方法的底层实现，可以提供比前两者更多的属性与参数设置，如果需要高级的...
jquery对ajax请求扩展
fy2862370237的博客
06-19 972
jquery对ajax请求进行加强 我最近维护的一个项目中，前端的代码编写比较优秀，值得学习一番。 我们的项目登录系统用的是sso框架，所有权限校验都是自己编写的，其中用户登录之后需要生成token，用于权限校验，然而每次发送请求时都需要携带token进行校验，可以将token信息放入请求头中，比较方便，那么如何将token放入请求头呢？ ajax方法中有和beforeSend()方法可以实现请求...
jquery-ajax和原生ajax
weixin_44968674的博客
07-19 184
一. jquery的ajax 1.jquery的ajax是对原生ajax的封装 $.ajsx() jquery 调用 ajax 方法： 格式：$.ajax({}); 参数： type：请求方式 GET/POST url：请求地址 url async：是否异步，默认是 true 表示异步 data：发送到服务器的数据 dataType：预期服务器返回的数据类型 conte...
Jquery ajax请求导出Excel表格的实现代码
10-22
下面小编就为大家带来一篇Jquery ajax请求导出Excel表格的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用jQuery Ajax 请求webservice来实现更简练的Ajax
10-21
使用jQuery Ajax请求Web Service可以极大地简化前端与后端的交互过程，避免了创建大量的一般处理程序(.ashx)或Web服务(.asmx)文件。本文将详细介绍如何使用jQuery的Ajax功能来调用Web Service中的WebMethod，以及...
浅析jQuery Ajax请求参数和返回数据的处理
11-23
在本文中，我们将深入探讨jQuery Ajax请求的参数设置、数据处理以及返回数据的优雅处理方式。 首先，$.ajax()函数是最通用的Ajax请求方法，它接受一个包含各种配置选项的对象作为参数。这些选项包括URL、请求类型...
jquery ajax请求实例深入解析
01-21
jquery中封装了一些ajax请求的方法，很实用。 比如.ajaxComplete()——请求完成时.ajaxError()——请求失败时.ajaxSend()——在Ajax请求发送时附加一个function去执行.ajaxStart()——请求开始时，.ajaxStop()——...
jquery ajax 请求小技巧实例分析
12-13
本文将深入探讨jQuery AJAX请求的一些实用技巧。 首先，官方推荐的$.ajax()函数的调用方式如下： ```javascript $.ajax({ url: "http://xxxxxxxxxxxxxxxxx/", dataType: "json", type: "get", beforeSend: ...
JQuery中的Ajax请求方式
YCQNB_的博客
02-27 2115
1.了解jQuery中的Ajax 在浏览器中提供了XMLHttpRequest用法比较复杂，因此jQuery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，降低了Ajax的使用难度，提高了工作中的工作效率 2.$.get()函数 1.jQuery中的$.get()函数专门用来发起get请求,从而将服务器上的资源请求到客服端进行使用 $.get()函数的语法格式 $.get(url,[data],[callback]) url：要请求的资源地址 data:请求资源期间要
jQuery发送Ajax请求的几种方式
qq_45904018的博客
02-27 1729
JQuery发送ajax请求的方法有很多，其中最基本的方法是$.ajax，在其中封装的方法有 $.get, $post等。我们分别举了不同的示例。数据格式首先，浏览器与服务器之间传输数据所采用的格式，比较常见的有等，目前由于json占用更小存储，并且是JavaScript原生格式，因此大家大部分的选择。
jQuery的Ajax请求
cargo_999999的博客
09-28 377
jQuery的Ajax请求jQuery的Ajax请求Ajax：Ajax的特点：Ajax请求：常用方法总结Ajax请求过程 jQuery的Ajax请求 Ajax： Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 Ajax的特点： 局部刷新、异步提交 Ajax请求：常用方法 常用方法 参数数据类型 其他 用途 $....
jQuery实现ajax请求
qq_49044908的博客
11-13 3996
jQuery实现ajax请求 在没学习jQuery之前,发送ajax是比较麻烦的一个过程,需要四个步骤,jQuery将这些个步骤简化了,使用起来更加方便快捷 相关函数 $.ajax() : 它是jQuery中实现ajax的核心函数 $.post() : 这个函数是使用post方式发送ajax请求 $.get() : 这个函数是使用get的方式发送ajax请求 $.post() 和 $.get() 它们都是在内部调用了 $.ajax() ,所以 $.ajax() 是核心函数 $.ajax() 的使用 这个
AJAX简单请求流程
Andriivo的专栏
07-27 1673
AJAX页面无刷新。传输数据与接收数据都是通过JS代码来完成的。 要使用AJAX进行数据的传输，需要以下几个步骤： 第一步：获取数据传输的对象XMLHttpRequest，在获取的时候注意判断浏览器的类型 js 代码 /*       *最终目的只有一个,就是获得XMLHttpRequest对象(只有有了它以后,       *才能以ajax方式发送请求数据)  ...
原生js与JQuery的ajax请求
AK的博客
08-13 8398
原生js的ajax请求 1.创建XMLHttpRequest对象 var xhr=new XMLHttpRequest(); 2.准备发送请求 open() xhr.open('请求类型','url地址',是否异步); 参数 描述 请求类型 GET 或 POST url 文件在服务器上的地址 是否异步 true(异步) / false(同步) 3.发送请求数据 send() xhr.send(); 4.请求返回的回调函数 当页面的加载状态发生改变的时候readyState属
数据库安全：MySQL安全配置，MySQL安全基线检查加固
最新发布
wangyuxiang946的博客
07-23 2476
MySQL基线检查，基线配置，安全加固
jquery ajax请求
02-01
jQuery是一个流行的JavaScript库，它简化了JavaScript编程的许多任务。其中一个常用的功能是通过Ajax发送HTTP请求。 使用jQuery的Ajax功能，可以通过异步方式从服务器获取数据，而无需刷新整个页面。以下是使用jQuery进行Ajax请求的基本步骤： 1. 引入jQuery库：在HTML文件中，首先需要引入jQuery库。可以通过以下方式引入： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 2. 发送Ajax请求：使用`$.ajax()`函数发送Ajax请求。该函数接受一个包含请求参数的对象作为参数。以下是一个示例： ```javascript $.ajax({ url: 'http://example.com/api/data', // 请求的URL method: 'GET', // 请求方法（GET、POST等） data: { // 请求参数（可选） param1: 'value1', param2: 'value2' }, success: function(response) { // 请求成功时的回调函数 console.log(response); }, error: function(xhr, status, error) { // 请求失败时的回调函数 console.error(error); } }); ``` 在上述示例中，`url`指定了请求的URL，`method`指定了请求方法（GET、POST等），`data`指定了请求参数（可选）。`success`是请求成功时的回调函数，`error`是请求失败时的回调函数。 3. 处理响应：在成功的回调函数中，可以处理从服务器返回的响应数据。在上述示例中，响应数据通过`response`参数传递给回调函数。 以上是使用jQuery进行Ajax请求的基本步骤。你可以根据具体需求设置更多的参数，如请求头、超时时间等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

碑无名

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值