Question

问题

我正在使用ajax向运行中的Express服务器发出http请求。

为解释这种情况，我将标记3个GET Ajax请求A，B，C：

我可以根据需要多次运行Ajax调用A，然后运行B，然后运行C，而没有问题。
但是一旦我运行ajax调用B（无论顺序如何）然后刷新页面，就无法再进行其他调用了！
此问题仅在Ajax调用B和页面刷新后出现。
如果我运行Ajax并根据需要多次调用A和C，并且避免调用B，然后刷新，则不会遇到任何问题！
此外，如前所述，我可以根据需要任意多次调用A，B，C，但是如果B被调用了至少一次，则刷新页面后就不会再调用它了可以拨打电话

错误的解决方案

要解决此问题，我需要每次重新启动服务器

我尝试过的事情

我尝试清除所有浏览数据并强制进行重新加载，但这并不能解决任何问题

问题

我知道这是一个奇怪的情况，并且进行了怪异的解释，但是我对其进行了至少50次测试，并且我确定这个特定的事件序列是导致问题的原因：Ajax调用B导致了其他任何Ajax调用的问题< strong>仅在重新加载页面后！！

是什么原因造成的？呼叫B发生了一些情况，阻止了任何其他请求仅在刷新后发出。任何想法，这可能是什么？

Ajax调用B与其他调用之间的唯一区别是，它具有“内容类型”：“文本”，而其他请求则没有！

引起问题的电话号码是3 ！！！

代码

server.js

const express = require('express')
const request = require('request')
const app = express()
app.use(express.static('public')); 
const port = process.env.PORT

app.listen(port, () => {
    console.log('Server is up on port ' + port)
})

// 1 display all books
app.get('/web/books', (req, res) => {
    options.url = defaultURL + '/books'
    request(options, function (error, response, body) {
        if (error || body.data === undefined) return res.send({ error: body.error });              
        const books = body.data.map((book) => book.id + ': ' + book.name )
        res.status(200).send(body.data)
    });    
})

// 2 display chapters in a book
app.get('/web/:booksId', (req, res) => {    
    options.url = defaultURL + '/books/' + req.params.booksId + '/chapters'
    request(options, function (error, response, body) {
        if (error || body.data === undefined) return res.status(400).send({ error: body.error });              
        // const chapters = body.data.map((chapter) => chapter.id + ': ' + chapter.reference)
        res.status(200).send(body.data)
    });    
})

// 3 display passage
app.get('/web/passage/:booksId/:chaptersId/:verse1Id/:verse2Id', (req, res) => {
    options.qs = { 'content-type': 'text' }
    options.url = defaultURL + '/passages/' + req.params.booksId + '.' + req.params.chaptersId + '.' + req.params.verse1Id + '-' + req.params.booksId + '.' + req.params.chaptersId + '.' + req.params.verse2Id
    request(options, function (error, response, body) {
        if (error || body.data === undefined) return res.send({ error: body.error });     
        console.log(body.data)                    
        res.status(200).send(body.data)
    });    
})

client.js

第一个Ajax调用是发生问题的地方

// 1 once book selected, display chapters
$('#bookSelect').on('change', function() {

  $.ajax({
    url: 'web/'  + this.value,
    type: 'GET',
    dataType: 'json',
    success: (data) => {
       console.log(data);
    },
  });
});

// 2 once chapter selected, display verse
$('#chapterSelect').on('change', function() {

  $.ajax({
    url: 'web/'  + book + '/' + chapter,
    type: 'GET',
    dataType: 'json',
    success: (data) => {
       console.log(data)
    },
  });
});

// 3 on append to verse button click
$('#appendToVerse').click((e) => {
  e.preventDefault();

  $.ajax({
    url: 'web/passage/' + book + '/' + chapter + '/' + verse + '/' + verse2,
    type: 'GET',
  })
  .done(( data ) => {
    console.log(data)
   })
})

HTTP响应

Chrome Header Screenshot after page refresh when ajax call fails

Chrome响应：{“错误”：“错误请求”}

Answer 1

好的，所以我自己解决了。原来我使用的API存在问题。所以我换了一个。

某些Ajax请求在页面刷新后阻止其他Ajax请求

1 个答案: