【AJAX】使用JQ发送AJAX发送请求-Toy模板网

这篇具有很好参考价值的文章主要介绍了【AJAX】使用JQ发送AJAX发送请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

首先要引入JQ

    <script crossorigin="anonymous" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

服务端代码

// 服务端准备
// 1、引入express
const express = require('express');
// 2、创建应用对象
const app = express()
// 3、创建路由规则
// request是对请求的封装
// response是对响应的封装
app.all('/server',(request,response)=>{
    // 设置响应头：设置运行跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    // 第一步：设置发给客户端的JSON格式数据
    var data={
        code:200,
        msg:"成功"
    }
    // 第二步：由于response.send()只能发送字符串,所以要把JSON转换成字符串
    data = JSON.stringify(data)
    // 第三步：发送数据
    response.send(data);
});
// 4、监听端口的启动服务
app.listen(8000,()=>{
    console.log("服务已启动,8000端口监听中...");
})

// 5、启动服务,终端输入: node server.js基本使用.js ,启动之后在浏览器输入127.0.0.1:8000

客户端代码

格式1: $.get/post(发送地址, 发送参数{key:value,key:value...} 回调函数(function(data){}[data:响应体]))


    $.get('http://127.0.0.1:8000/server', { a: 100, b: 200 }, function (data) {
        console.log(data);
    });

运行结果

【AJAX】使用JQ发送AJAX发送请求,AJAX,ajax,okhttp,前端

获取的响应是字符串，如何把字符串变成JSON对象

方法一：JSON.parse(data)

方法二：设置响应数据类型为json格式

// $.get/post(发送地址, 发送参数{key:value,key:value...} 回调函数(function(data){}[data:响应体]),,'json)

$.get('http://127.0.0.1:8000/server', { a: 100, b: 200 }, function (data) {

console.log(data);

},'json');

运行结果

【AJAX】使用JQ发送AJAX发送请求,AJAX,ajax,okhttp,前端文章来源地址https://www.toymoban.com/news/detail-541348.html

格式2： // $.ajax({url:发送地址,data:发送参数,type:GET/POST(请求类型)，回调函数(data:响应体)})

<script>
    $.ajax({
                // 1、url
                url:'http://127.0.0.1:8000/server',
                // 2、参数
                data:{
                    a:100,
                    b:200
                },
                // 3、请求类型GET/POST
                type:'GET',
                // 4、成功的回调
                success:function(data){
                    console.log(data);
                },
                // 5、响应体类型设置
                dataType:'json',
                // 失败回调
                error:function(){
                    console.log('报错');
                },
                // 超时时间设置
                timeout:2000,
                // 请求头信息
                headers:{
                    c:300,
                    d:400
                }
            }) 
</script>

到了这里，关于【AJAX】使用JQ发送AJAX发送请求的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！