让最基本的 ajax 在 Windows 7 上的 xampp 上工作以检查互联网连接

Posted 2023-02-25

【中文标题】让最基本的 ajax 在 Windows 7 上的 xampp 上工作以检查互联网连接

【英文标题】：Getting the most basic ajax working on xampp on windows 7 to check for internet connectivity

【发布时间】：2021-03-30 03:28:44

【问题描述】：

在提交表单之前调用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 && 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();

【讨论】：

我按照您的建议进行了更改。我总是得到错误的情况，它永远不会成功。

我做了您建议的更改，谢谢。我还从表单中取出了按钮以防止执行表单操作。 ajax 调用总是失败，这意味着我无法确定是否有互联网连接。我还想返回一个值以防止在没有互联网连接的情况下提交表单，（这是另一种方法吗？）当我直接调用时，php文件会立即在浏览器中显示正确的结果而没有问题.

我花了一个小时在 Chrome 中调试。我必须弄清楚我正在寻找的实际结果在哪里找到，所以这里是成功函数调用：success: function(jqXHR,result) alert(jqXHR); switch(jqXHR)