跟着博主一起学Ajax（三）

最新推荐文章于 2024-09-10 18:50:14 发布

小hu同学

最新推荐文章于 2024-09-10 18:50:14 发布

阅读量91

点赞数 1

分类专栏： Ajax 文章标签： ajax jquery

本文链接：https://blog.csdn.net/weixin_45054614/article/details/118060004

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery中的ajax

一、$.ajax()

1.1 $.ajax()方法概述

作用：发送ajax请求

  $.ajax({
               //请求方式
               type:'get',
               //请求地址
               //在同源情况下可以简写
               url:'/base',
               //在请求发送之前调用
               beforeSend:function(){
                alert('请求不会发送')
                return false
               },
               //请求成功后函数被调用
               success:function(response){
                //response为服务器端返回的数据
                //方法内部会自动将json字符串转换为json对象
                console.log(response);
                
               },
               //请求失败以后函数被调用
               error:function(xhr){
                console.log(xhr);
               }
           })

data 除了传递对象之外可以传递之外，也可以直接传递字符串

{
	data:'name=xiaohu&age=20'
}

如果服务器端要求客户端传递的参数为JSON格式就需要告诉$.ajax（），我们需要传递JSON格式

{
contentType: 'application/JSON',
}

需要转换一下，转换为对象字符串

JSON.stringify({name:'xiaohu',age:'20'})

1.2 serialize方法

作用：将表单中的数据自动拼接成字符串类型的参数

var params = $('#form').serialize();
//name=xiaohu&age=20

示例代码

<!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>
</head>
<body>
    <form id="form">
        <input type="text"name='username'>
        <input type="password" name="password">
        <input type="submit" value="提交">
    </form>
    <script src="/js/jquery.min.js"></script>
    <script>
        $('form').on('submit',function () {
        //   var params = $('#form').serialize();
        //   console.log(params);
        serializeObject($(this));
            return false; 
        });
        //将表单中用户输入的内容转换为对象类型
        function serializeObject(obj) {
            var result = {};
            //[{name:'username',value:'用户输入的内容'},{name:'password',value:'123'}]
                // serializeArray
               var params = obj.serializeArray();
               //循环数组 将数组转换为对象类型
               $.each(params,function(index,value) {
                   result[value.name] = value.value;
               })
               //将处理的结果返回到函数外部
              return result;
        }
    </script>
</body>
</html>

1.3 $.ajax()发送jsonp请求

作用：发送jsonp请求

$.ajax({
    url: 'http://www.example.com',
    // 指定当前发送jsonp请求
    dataType: 'jsonp',
    // 修改callback参数名称
    jsonp: 'cb',
    // 指定函数名称
    jsonCallback: 'fnName',
    success: function (response) {} 
})

代码示例
html代码

<!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>
</head>
<body>
    <button id="btn">发送请求</button>
    <script src="/js/jquery.min.js"></script>
    <script>
        
        $('#btn').on('click',function() {
            $.ajax({
                url:'/jsonp',
                //代表现在要发送的是jsonp请求
                dataType:'jsonp',
            
                success:function(response){
                    console.log(response);
                }
            })            
        })
    </script>
</body>
</html>

app.js

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 向其他服务器端请求数据的模块
const request = require('request');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
app.get('/jsonp',(req,res) =>{
	res.jsonp({
		name:'小胡',
		age:'20'
	})
	})
// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');

结果为
在这里插入图片描述
在jsonp的后面跟的是callback

如果我们需要将callback这个名称自己修改为自定义的怎么处理呢？

//在$.ajax中添加一个属性
//向服务器端传递函数名字的参数名称
 jsonp:'cb',

在服务器端app.js

app.get('/jsonp',(req,res) =>{
   //使用req.query.cb获取到
   //赋值给cb
	const cb = req.query.cb
	//字符转拼接，将值赋值给data
	const data = cb + "({data:'小hu'})"
	//响应给客户端
	res.send(data);
})

在这里插入图片描述
不想使用success成功后的函数，想自己来传递一个函数

//使用jsonpCallback来改变名称
jsonpCallback:'fn'

示例代码

<body>
    <button id="btn">发送请求</button>
    <script src="/js/jquery.min.js"></script>
    <script>
    //定义一个fn函数
        function fn(response) {
            console.log(response);
        }
        $('#btn').on('click',function() {
            $.ajax({
                url:'/jsonp',
                //代表现在要发送的是jsonp请求
                dataType:'jsonp',
                //向服务器端传递函数名字的参数名称
                jsonp:'cb',
                jsonpCallback:'fn',
                // success:function(response){
                //     console.log(response);
                // }
            })            
        })
    </script>
</body>

在这里插入图片描述

二、$.get() .post()方法概述

作用：$.get方法用于发送get请求，.post方法用于发送post请求。

$.get('http://www.example.com', {name: 'zhangsan', age: 30}, function (response) {}) 
$.post('http://www.example.com', {name: 'lisi', age: 22}, function (response) {})

三、JQuery中的Ajax全局事件

3.1 全局事件

只要页面中有Ajax请求被发送，对应的全局事件就会被触发

.ajaxStart()//当请求开始发送时触发
.ajaxComplete() //当请求完成时触发

3.2 NProgress插件（进度条）

纳米级进度条，使用逼真的涓流动画来告诉用户正在发生的事情！
NProgress官网地址

<link rel='stylesheet' href='nprogress.css'/>
<script src="nprogress.js"></script>

NProgress.start(); //进度条开始运动
NProgress.done();  //进度条结束运动

代码示例

//当页面中有ajax请求发送时触发
$(document).on('ajaxStart',function(){
	NProgress.start(); //进度条开始运动
})
//必须绑定在document身上
//当页面中有ajax请求完成时触发
$(document).on('ajaxComplete',function(){
	NProgress.done();  //进度条结束运动
})

小hu同学

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
跟着博主一起学Ajax（三）

jQuery中的ajax一、$.ajax()1.1 $.ajax()方法概述1.2 serialize方法1.3 $.ajax()发送jsonp请求二、$.get() .post()方法概述一、$.ajax()1.1 $.ajax()方法概述作用：发送ajax请求 $.ajax({ //请求方式 type:'get', //请求地址 //在同源情况下可以简写
复制链接

扫一扫

专栏目录