首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Sweet Alert 2中的Resolve / Promise之后刷新选择框中的JSON输入

在Sweet Alert 2中,Resolve / Promise是指在弹出框关闭后执行的操作。当用户在选择框中进行了选择并点击确认后,可以通过Resolve / Promise来获取用户的选择结果,并根据选择结果进行相应的处理。

要在Resolve / Promise之后刷新选择框中的JSON输入,可以按照以下步骤进行操作:

  1. 首先,确保你已经引入了Sweet Alert 2库,并创建了一个选择框弹出框。
  2. 在选择框的确认按钮的点击事件中,使用Resolve / Promise来获取用户的选择结果。例如,可以使用以下代码获取选择框中的值:
代码语言:txt
复制
Swal.fire({
  title: '选择框',
  input: 'select',
  inputOptions: {
    'option1': '选项1',
    'option2': '选项2',
    'option3': '选项3'
  },
  inputPlaceholder: '请选择一个选项',
  showCancelButton: true,
  confirmButtonText: '确认',
  cancelButtonText: '取消',
  preConfirm: (selectedOption) => {
    return selectedOption;
  }
}).then((result) => {
  if (result.isConfirmed) {
    const selectedOption = result.value;
    // 在这里可以根据选择结果进行相应的处理
    // 例如,可以根据选择结果刷新JSON输入
    refreshJSONInput(selectedOption);
  }
});
  1. 在refreshJSONInput函数中,根据选择结果来刷新JSON输入。具体的刷新逻辑根据你的需求而定。例如,可以根据选择的选项来更新JSON输入框的内容,或者重新加载JSON数据等。
代码语言:txt
复制
function refreshJSONInput(selectedOption) {
  // 根据选择结果来刷新JSON输入
  // 例如,更新JSON输入框的内容
  const jsonInput = document.getElementById('json-input');
  if (selectedOption === 'option1') {
    jsonInput.value = '{"key1": "value1"}';
  } else if (selectedOption === 'option2') {
    jsonInput.value = '{"key2": "value2"}';
  } else if (selectedOption === 'option3') {
    jsonInput.value = '{"key3": "value3"}';
  }
}

通过以上步骤,你可以在Sweet Alert 2中的Resolve / Promise之后刷新选择框中的JSON输入。根据选择结果,你可以执行相应的操作来更新JSON输入框的内容或者进行其他处理。

关于Sweet Alert 2的更多信息和使用方法,你可以参考腾讯云的相关产品Sweet Alert 2的介绍页面:Sweet Alert 2产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

20分钟带你掌握JavaScript Promise和 AsyncAwait

因此,为了避免程序在请求时无响应情况,异步编程就成为了开发人员一项基本技能。 JavaScript处理异步操作时,通常我们经常会听到 "Promise "这个概念。..., 2000); }); }; JavaScript,我们可以使用new Promise()创建一个新Promise,它接受一个参数为:(resolve,reject)=>{} 函数。...下面我们开始示例2 示例2:一个猜数字游戏 基本需求: 用户可以输入任意数字 系统从1到6随机生成一个数字 如果用户输入数字等于系统随机数,则给用户2分 如果用户输入数字与系统随机数相差1,给用户1...new Promise((resolve, reject) => { // 从这开始编码 }); }; 我们要做第一件事是向用户索要一个数字,并在1到6之间随机选择一个数字: const...相信不断实践,对它理解会越深、越强,希望这篇文章能对大家理解Promise和Async/Await带来一些帮助。

67220
  • Sweet Alert弹窗插件安装及使用详解笔记

    首先,介绍一下 什么是 Sweet AlertSweet Alert 是一个替代传统 JavaScript Alert “美化版”提示效果。...SweetAlert 自动居中对齐页面中央,不管是台式电脑,手机还是平板电脑看起来效果都很不错。 另外提供了丰富自定义配置选择,可以灵活控制。...项目主页: http://t4t5.github.io/sweetalert/ 安装 Sweet Alert  npm 安装 NPM结合Browserify或Webpack等工具是安装SweetAlert...;         }     }); AJAX 请求 由于 SweetAlert 是基于 promise ,可以将它与同样基于 promise AJAX函数配对。...在上面的示例,我们了解到如何将 content 选项值设置 "input" ,模态中加入 元素,该元素根据输入值,变换“确认”按钮需要解析值。

    9.2K10

    群友因为这个功能实现没回答好,到手 offer 飞了。来看看 React19 如何解决

    常规实现其实是输入旁边放置一个确认按钮,使用者会首先在输入输入好想要搜索关键字,然后再鼠标点击该按钮。 在这个基础之上,我们可以逐渐提高使用体验。...一个最基础优化思路:输入完成之后,再使用鼠标去点击,有点麻烦,因此我们可以输入之后,点击空格键代替确认按钮。 接下来,然后我们可以新增一个历史记录或者智能提示用于提高用户输入体验。如下图所示。...把请求列表过程前置到输入 onchange 事件。 很显然,这样优化是一个非常棒思路,因为简化了用户操作步骤。...'https://jsonplaceholder.typicode.com/posts', {signal}) resolve(res.json()) }) promise.cancel.../posts', {signal}) resolve(res.json()) }) promise.cancel = () => controller.abort() return

    8610

    盘点JavaScriptPromise高级用法

    初始 promise 1 秒后进行 resolve (*), //2. 然后 .then 处理程序(handler)被调用 (**)。 //3....从 fetch 返回 response 对象还包括 response.json() 方法,该方法读取远程数据并将其解析为 JSON例子,这更加方便,所以让切换到这个方法。...就目前而言,是做不到。 为了使链可扩展,需要返回一个头像显示结束时进行 resolve promise。...注: 也就是说,第 (*) 行 .then 处理程序(handler)现在返回一个 new Promise,只有 setTimeout resolve(githubUser) (**) 被调用后才会变为...链下一个 .then 将一直等待这一时刻到来。 作为一个好做法,异步行为应该始终返回一个 promise。这样就可以使得之后计划后续行为成为可能。

    1.1K20

    【融职培训】Web前端学习 第6章 jQuery Ajax 2 Ajax入门

    一、Ajax概述 我们之前学习内容,向服务器发送请求后,再浏览器响应页面都是整页刷新某些项目中,我们只希望获取页面的局部数据,而不必整页刷新,这个时候就需要使用Ajax来实现功能了。...,这样格式再熟悉不过了,基本是零学习成本,以后我们使用Ajax传递数据都是使用json格式。...ajax优缺点 优点:按需获取数据,提升系统性能。 缺点:异步获取数据,不利于搜索引擎优化。 二、Ajax原理 考虑一个问题,之前学习内容,我们是如何向服务器发送请求?...这里我们列举一下: 浏览器中直接输入网址 a标签实现页面跳转 表单提交 Postman模拟http请求 Ajax原理是通过XMLhttpRequest对象向服务器发送请求,实例代码如下所示: 1...13 myajax("get","/data",function(data){ 14 alert(data); 15 }); 16 } Promise 过多使用回调函数会让程序变得很难维护

    42420

    Web前端学习 第6章 jQuery Ajax 2 Ajax入门

    一、Ajax概述 我们之前学习内容,向服务器发送请求后,再浏览器响应页面都是整页刷新某些项目中,我们只希望获取页面的局部数据,而不必整页刷新,这个时候就需要使用Ajax来实现功能了。...,这样格式再熟悉不过了,基本是零学习成本,以后我们使用Ajax传递数据都是使用json格式。...ajax优缺点 优点:按需获取数据,提升系统性能。 缺点:异步获取数据,不利于搜索引擎优化。 二、Ajax原理 考虑一个问题,之前学习内容,我们是如何向服务器发送请求?...这里我们列举一下: 浏览器中直接输入网址 a标签实现页面跳转 表单提交 Postman模拟http请求 Ajax原理是通过XMLhttpRequest对象向服务器发送请求,实例代码如下所示: 1...13 myajax("get","/data",function(data){ 14 alert(data); 15 }); 16 } Promise 过多使用回调函数会让程序变得很难维护

    53510

    dom更新到底javascript事件循环哪个阶段?「前端每日一题v22.11.17」

    0) document.getElementsByTagName('div')[0].innerHTML = 'FE情报局' new Promise((resolve) => {resolve()})....then(() => {console.log('promise done')}) 其中我宏任务开始时加了一个alert,用来阻塞js,观测页面上是否已经有了「FE情报局」,当我满怀信心按下时候...所以浏览器,js线程和gui线程是互斥,只能允许一个线程进程任务执行,js线程运行时,gui线程是不会运行 有了这个基础,我们讨论一下动画,这里涉及到一个概念,那就是刷新刷新率 我们平时也会经常听到刷新率这个词...((resolve) => {resolve()}).then(() => { console.log('promise done') for (let index = 0; index < 1000000...之前,done之后就已经渲染到浏览器上了,刚开始直接显示出来一部分原因是因为alert导致,换成正常阻塞流程js就可以了 欢迎大家留言讨论,是不是因为alert机制导致微任务结束之后,宏任务

    75130

    Promise详细教程,全方位解析,让你秒懂异步

    一般情况下是有异步操作时,使用Promise对这个异步操作进行封装 new ->构造函数(1.保存了一些状态信息 2.执行传入函数) 执行传入回调函数时,会传入两个函数:resolve,reject..., 1000); }); // resolve 运行 .then 第一个函数 promise.then( result => alert(result), // 1 秒后显示 "咚!".../3] 复制代码 函数 return 一个 promise function promisify(f) { return new Promise((resolve, reject) => {...*/ 复制代码 异步微任务队列 只有 JavaScript 引擎执行完任务时,才开始执行任务队列任务。 队列(queue)也是按先后顺序执行,首先进入队列任务会首先运行。...alert("1"); // 这个 1 先显示 复制代码 如果我们需要确保一段代码异步之后被执行,我们可以将它添加到链式调用 .then  最后挑一种自己喜欢方式书写就可以了,我刚开始看时候也有点蒙蔽

    54210

    【ECMAScript6】es6 要点(二)Promise | 自个写一个Promise | Generator | AsyncAwait

    Promise:一种解决回调问题技术 首先我们要理解同步与异步含义: 同步:函数执行时会阻塞调用者,并在执行完毕后返回结果。 异步:函数执行时不会阻塞调用者,但是一旦执行完毕就会返回结果。...}); //all(),Promise全都执行完之后 Promise.all([ p1,p2 ]).then(function(arr){ alert('全都成功'); let [res1,res2...相反,它创建了一个新迭代器,通过该迭代器我们才能从生成器请求值。在生成器生成了一个之后,生成器会进入挂起执行并等待下一个请求到来状态。从某种方面上说,生成器工作更像一个状态机。...挂起让渡:当生成器执行过程遇到一个yield表达式,它会创建一个包含返回值新对象,随后再挂起执行。生成器在这个状态暂停并等待继续执行。...:帮助处理异步代码 回调函数:Promise对象上注册成功和失败回调函数 箭头函数:适合用在回调函数上 闭包:迭代器async函数内被创建,promise回调函数内通过闭包获取该迭代器 generator

    25420

    ES6Promise和Fetch

    调用resolve和reject时,传入值,将作为输入参数,传递到then方法resolve和reject。...Promise对象上可以调用then()方法,它也接受两个方法,一个是resolve,一个是reject。then()方法返回还是一个Promise对象,因此支持链式调用。...值得注意是:then方法中上一个resolve方法返回值,将成为下一个then方法resolve输入参数。由此构成了数据流动。...ES6,提供了fetch方法简化了这一操作。除此以外,fetch方法返回是一个Promise对象,因此,可以链式发起异步请求。而服务端返回值则通过response对象传递。...总结 这篇文章主要讲述了ES6Promise对象和Fetch方法,上面的代码,无需Babel就可以新版本Chrome浏览器下直接运行,建议想要熟悉朋友们敲一遍代码,执行一遍以加深理解。

    1.5K40

    前端单文件入口发布新版本 缓存问题

    前端单文件入口发布新版本 缓存问题 现代 javascript框架项目开发,一直有一个令人都疼问题,就是缓存问题;每次发版完之后由于浏览器缓存机制,用户端不会实时获取新项目页面,甚至有可能出现静态文件获取报...方法思路 入口文件配置文件更新后 缓存同步更新 打包时候 生成一个唯一版本号,并添加到 入口目录/config.json 每次 路由 发生变更时候,判断版本号是否发生变化,如果发生变化,则刷新当前文件...以 vue 项目为例 项目 public 文件夹下 index.html 入口文件添加如下代码 1 2<...(resolve('public/config.json')) // public文件夹下新建config.json 7const configFile = path.resolve(__dirname...((resolve) => { 8 axios.get(`${process.env.VUE_APP_DOMAIN}/config.json`, { 9 params: { 10

    59510

    ES6-语法基础

    模板字符串可以字符串换行;也可以把变量放入模板字符串占位符。...(line); 注意点:JSON字符串属性名必须使用引号声明:"属性名";JSON字符串字符串值只能使用双引号 "。...JavaScript世界,所有代码都是单线程执行由于这个“缺陷”,JavaScript所有需要等待操作(网络操作),都必须“异步执行”。...“异步编程”通过“回调函数”实现,一个“同步编程”中一段连续调用,“异步”很可能会陷入“回调地狱”(Callback Hell)。...上述fetch方法,then回调参数是响应而不是json,为了使用更简便,我们可以利用Promise特性加上jQuery,自己实现一个then回调是jsonPromise异步请求函数fetchJOSN

    47220

    uni-app移动端开发技巧总结

    onLaunch生命周期函数添加如下代码: 3.设置应用启动时间 App.vueonLaunch生命周期函数添加如下代码: 4.禁止手机某页面右滑返回 在对应页面的vue文件添加onBackPress...(1)首先要开启该页面的下拉刷新功能 (2)然后该页面添加OnPullDownRefresh(e){ } 里面监听下拉刷新,并在里面调用获取页面数据代码,然后就要在里面使用vue**this..."> 输入带左右图标 可以用于设置搜索,但是可能没有这个必要。..." @iconClick="onClick"> 可以设置输入类型 type属性,值有:password密码,textarea多行文本输入,text单行文本,number...数字输入键盘 可以设置输入最大长度 :maxlength 设置键盘右下角文字 confirmType conformType有这些属性: 属性名 说明 send 发送 search 搜索 next

    2.9K30

    重温前端-js篇

    ) 是 HTML5引入新方法,返回文档匹配CSS选择所有元素节点列表 document.readyState 返回文档状态 (载入……) document.referrer 返回载入当前文档文档...了解完了宏任务 Macrotask和微任务 Microtask两种队列执行顺序之后,我们接着来看,真实场景下这两种类型队列里真正包含任务(我们以node V8引擎为例),node V8,这两种类型真实任务顺序如下所示...mousemove、mouseover,input输入keypress等事件触发时,会不断地调用绑定在事件上回调函数,极大地浪费资源,降低前端性能。...函数防抖关注一定时间连续触发事件只最后执行一次,而函数节流侧重于一段时间内只执行一次。 常见应用场景 函数防抖应用场景: 连续事件,只需触发一次回调场景有: 搜索搜索输入。...,这是我们不希望,所以你需要让沙箱内变量访问都在你监控范围内;不过,你可以使用with API,with块级作用域下,变量访问会优先查找你传入参数对象,之后再往上找,所以相当于你变相监控到了代码

    5.3K10

    await 只 async 函数工作

    关于 promise 一种更优雅写法 async/await ,await 只会出现在 async 函数,我们使用 async/await 时,几乎不需要 .then,因为 await 为我们处理等待...例如,上述代码返回一个带有结果 1 resolved promise,我们可以进行测试: f().then(alert); // 1 …我们可以显式返回一个 promise,结果相同: async...function f() { return Promise.resolve(1); } f().then(alert); // 1 因此, async 确保函数返回一个 promise,并在其中封装非...下面是一个 promise 1s 之后 resolve 例子: async function f() { let promise = new Promise((resolve, reject...await 顶层代码无效 刚开始使用 await 新手往往会忘记这一点,但我们不能在最顶层代码编写 await,因为它会无效: // 顶层代码中导致语法错误 let response = await

    1.5K10

    vue项目小点(二)

    ,需要动态创建节点然后追加到某元素,这期间遇到问题就是动态创建节点后,类名也已经加上了 ,但是样式就是没有生效,最后发现原因产生竟然是scoped属性...安装qrcodejs2插件,控制台输入: npm install qrcodejs2 --save * 注意:这里安装是qrcodejs2,不是qrcode,否则会报错 ②....width: 100%; position: absolute; top: 50px; bottom: 0px; left: 0px; } 8. css实现表单输入前面的文字两端对齐...效果如图: 用户名: 密 码: 9. vue跳转页面传输对象,再刷新浏览器数据丢失问题(vue使用router传递数据) vue Router跳转传字符串是这样:(params传值需路由中做配置刷新后数据才不会丢失...如果vue Router跳转传对象,刷新数据仍然会丢失,那我们该怎么办呢? 数据类型原因,再传递数据之前使用【JSON.stringify】把要传递数据转换成字符串类型,再刷新就没有问题了!

    1.4K30
    领券