javascript - 使用发布请求的结果更新网页的正确方法

标签 javascript jquery html google-chrome-extension web-applications

我是网络开发新手,正在尝试正确更新我在发布请求后创建的弹出窗口。我这样做的方式似乎太复杂了。 基本上我有一个 chrome 扩展,它在某个时刻向我的数据库发出 post 请求并返回一个 url。然后我想打开一个弹出窗口,并将我的数据库刚刚在弹出窗口中传递的 URL 包含在内。这看起来很简单,我确信我当前的设计过于复杂: 在 content.js 中,我调用函数 doWork:

function doWork(itemName, itemPrice) {

    var items = [{'itemName': itemName, 'price': itemPrice}]
    // ajax the JSON to the server
    $.post('https:my/url/receiver', JSON.stringify(items), 
        function(data, status){
            chrome.runtime.sendMessage({type:'open_deals_page', url:data.url})
        });
}

这是由 background.js 在以下函数中接收的:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.type === 'open_deals_page') {
        chrome.tabs.create({
            url: chrome.extension.getURL('popup.html'),
            active: false
        }, function(tab) {
                chrome.windows.create({
                tabId: tab.id,
                type: 'panel',
                height: 200, width:200,
                focused: true,
                // incognito, top, left, ...
            });
            adjust_window(request.url)
        });
    }
});

在理想的情况下,函数 adjustment_window 会改变 下面的 popup.html 中 id='itemUrl' 的 html 元素:

<!DOCTYPE html><html><head><title>Dialog test</title></head><body>
</title>There is a better deal elsewhere on the web @</title>
<a href="giggle.com" id='itemUrl'>the url you requested</a>
</html>

不用说,我不确定如何设置 adjustment_window 函数或者是否在正确的位置调用它。我尝试了各种 jquery 选择器并不断获得空值。我也对如何确保访问刚刚打开的特定弹出窗口感到困惑。谢谢!

最佳答案

是否需要从content.js发出网络请求?这似乎可能在后台发生。如果问题是对 jQuery 的访问(对于 $.post),那么我建议检查 native fetch 函数。对于你来说,它看起来像

fetch(
  'https://your/url/receiver', 
  { 
    method: 'POST', 
    body: JSON.stringify(items)
  }
).then(res => res.json()).then(data => data.url)

上面使用了“箭头函数表达式”,但如果这些使理解变得困难,下面是等效的!

fetch(
  'https://your/url/receiver', 
  { 
    method: 'POST', 
    body: JSON.stringify(items)
  }
).then(function(res) { return res.json() }).then(function(data) { return data.url })

关于javascript - 使用发布请求的结果更新网页的正确方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61132995/

相关文章:

javascript - 如何找出 Node 进程中的内存泄漏

javascript - 仅当尚未运行 jQuery UI 时才运行动画

javascript - 如何本地化 jQuery UI Datepicker?

javascript - Handlebars.js 中的 "select"类似 "where"

jquery - 将图像放置在浏览器的 100% 宽度和 100% 高度的 div 中

html - IE6 错误 - anchor 标记内的 Div : inline images not links

javascript - 是否可以使用网络 worker 优化两个脚本?

javascript - 如何使用ajax json制作morris donut chart ?

javascript - 如何使用 API 调用中的 JSON 数据播放音频? (演讲者)

javascript - 我想从文本区域中选择特定文本并将其设置为粗体、斜体或在reactjs中创建超链接