Получение самого простого ajax, работающего на xampp в Windows 7, для проверки подключения к Интернету

#javascript #html #jquery #ajax #xampp

#javascript #HTML #jquery #ajax #xampp

Вопрос:

Перед отправкой onclick="return check_internet_conn()" вызывается форма, чтобы узнать, есть ли подключение к Интернету (я буду делать это на мобильном устройстве, xampp тоже будет на мобильном устройстве. Мое тестирование происходит в Windows 7), это запросит check_internet_connection.php файл для проверки подключения к Интернету (предпочитаю не проверять, существует ли изображение на каком-либо сервере для проверки подключения к Интернету через javascript). check_internet_connection.php работает нормально, но я никогда не могу получить javascript ajax, jQuery ajax или javascript fetch(), возвращающие содержимое файла.

 <div class="container">
  <form action="processQuestion.php" method="post">
   <div class="form-group">
     <label for="question">Write your question here:</label>
     <textarea class="form-control" rows="7" id="question_txt" name="question"></textarea>
   </div>
   <button type="submit" class="btn btn-primary" onclick="return check_internet_conn()">Submit Question</button> 
  </form>
  <p id="submit_error_no_internet" class="warning"></p>
</div>
 

Вот файл PHP

 <?PHP

try {
@   $connected = fsockopen("www.example.com", 80);
    if ($connected) {
        fclose($connected);
        echo "Connected";
    }
}   

catch(Exception $e) {
  echo 'Message: ' .$e->getMessage();
}

finally {
  echo "Not Connected!";
}

?>

 

И вот три разные попытки ajax и js fetch() с добавлениями отладки.

 <script src="jquery/jquery-3.5.1.slim.min.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.bundle.min.js"></script>
<script>

function check_internet_conn() {
    $.get("http://localhost/crud/check_internet_connection.php", function(data, status){
            switch(data) {
            case "Not Connected!":
                document.getElementById("submit_error_no_internet").innerHTML = "No Internet connection, connect to internet.";
                return false;
                break;
            case "ConnectedNot Connected!":
                return true;
                break;
            default:
                document.getElementById("submit_error_no_internet").innerHTML = "Nothing works";
            } 
        });
}

function check_internet_conn() {

    async function getText(file) {
        let myObject = await fetch(file);
        let myText = await myObject.text();
        switch(myText) {
        case "Not Connected!":
            document.getElementById("submit_error_no_internet").innerHTML = "No Internet connection, connect to internet.";
            return false;
            break;
        case "ConnectedNot Connected!":
            return true;
            break;
        default:
            document.getElementById("submit_error_no_internet").innerHTML = "Nothing works";
        }
    }

  getText("http://localhost/crud/check_internet_connection.php");
  
}


function check_internet_conn() {

    var myXmlhttp = new XMLHttpRequest();
    myXmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 amp;amp; this.status == 200) {
        document.getElementById("submit_error_no_internet").innerHTML = this.responseText;
        switch(this.responseText) {
            case "Not Connected!":
                document.getElementById("submit_error_no_internet").innerHTML = "No Internet connection, connect to internet.";
                return false;
                break;
            case "ConnectedNot Connected!":
                return true;
                break;
            default:
                document.getElementById("submit_error_no_internet").innerHTML = "Nothing works";
        } 
      }
    };
    myXmlhttp.open("GET", "http://localhost/crud/check_internet_connection.php");
    myXmlhttp.send();
    document.getElementById("submit_error_no_internet").innerHTML = myXmlhttp.status   " "   myXmlhttp.readyState;
}

</script>

 

Я попытался выполнить отладку в Firefox и Chrome, но без особого успеха. Сообщений об ошибках нет.

Ответ №1:

Я бы сделал что-то вроде:

 <button onclick="checkConnection()">Check connection</button>
 
 function checkConnection() {
$(document).ready(function() {
  $.ajax({
      url: "yourUrl",
      success: function(result) {
          if(result) {
          // you are connected
          } else {
          // you are not connected
          }
      },
      error: function(error) {
          // do something sad
      }
  });
});
 
 function is_connected() {
$connected = @fsockopen("www.example.com", 80); 
if ($connected){
    $is_conn = true; //action when connected
    fclose($connected);
}else{
    $is_conn = false; //action in connection failure
}
echo($is_conn);
die();
}
 

Комментарии:

1. Я внес предложенные вами изменения. Я всегда получаю сообщение об ошибке, оно никогда не завершается успешно.

2. Я внес предложенные вами изменения, спасибо. Я также убрал кнопку из формы, чтобы предотвратить выполнение действия формы. Вызов ajax всегда завершается неудачно, что означает, что я не могу узнать, есть ли подключение к Интернету. Я также хочу вернуть значение, чтобы предотвратить отправку формы, если нет подключения к Интернету (есть другой способ сделать это?) Файл php мгновенно показывает правильный результат в браузере без проблем, когда я вызываю его напрямую.

3. Я потратил добрый час на отладку в Chrome. Мне пришлось выяснить, где находится фактический результат, который я искал, так что вот вызов функции успеха: success: function(jqXHR,result) { alert(jqXHR); switch(jqXHR){