JQuery请求在一个系统上工作，但在其他系统上不工作

JQuery requests working on one system but not on other systems

本文关键字：工作 系统 其他 一个 请求 JQuery      更新时间：2023-09-26

我有我的管理页面的这段代码。早些时候，这个代码曾经在我的系统上工作。但现在它已经不起作用了。我的客户端需要更新此页面，现在当我尝试运行此页面时，它不会执行JQuery请求。它所做的是关注或更改第一个下拉列表的值其他类别和子类别下拉列表通过向另一个返回类别值的php文件发出Jquery请求来更新。另外，我试着在不同的浏览器中运行这个页面，但没有成功。

在通过代码段发布代码时也面临问题所以就在这里编写代码。。

代码如下-

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cracktitude-Admin</title>
<script src="scripts/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("form").on('submit',function(event){
        event.preventDefault();
            data = $(this).serialize();
            $.ajax({
            type: "GET",
            url: "admin-adddata.php",
            data: data
            }).done(function( msg ) {
            alert( "Data Saved: " + msg );
            location.reload(true);
            });
        });
    });
    </script>
    <script> 
        function categorylist(str) 
        { 
        if (str=="") 
          { 
          document.getElementById("category").innerHTML=""; 
          return; 
          }  
        if (window.XMLHttpRequest) 
          {// code for IE7+, Firefox, Chrome, Opera, Safari 
          xmlhttp=new XMLHttpRequest(); 
          } 
        else 
          {// code for IE6, IE5 
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
          } 
        xmlhttp.onreadystatechange=function() 
          { 
          if (xmlhttp.readyState==4 && xmlhttp.status==200) 
            { 
            document.getElementById("category").innerHTML=xmlhttp.responseText; 
            } 
          } 
        xmlhttp.open("GET","admin-getdata.php?choice="+str,true); 
        xmlhttp.send(); 
        } 
    </script>
    <script>
        function subcategorylist(str1) 
        { 
        if (str1=="") 
          { 
          document.getElementById("subcategory").innerHTML=""; 
          return; 
          }  
        if (window.XMLHttpRequest) 
          {// code for IE7+, Firefox, Chrome, Opera, Safari 
          xmlhttp=new XMLHttpRequest(); 
          } 
        else 
          {// code for IE6, IE5 
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
          } 
        xmlhttp.onreadystatechange=function() 
          { 
          if (xmlhttp.readyState==4 && xmlhttp.status==200) 
            { 
            document.getElementById("subcategory").innerHTML=xmlhttp.responseText; 
            } 
          } 
        xmlhttp.open("GET","admin-getdata1.php?choice="+str1,true); 
        xmlhttp.send(); 
        } 
    </script> 
<style type="text/css">
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #42413C;
    margin: 0;
    padding: 0;
    color: #333;
}
ul, ol, dl { 
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    padding-right: 15px;
    padding-left: 15px;}
a img { 
    border: none;
}
a:link {
    color: #42413C;
    text-decoration: underline;
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus { 
    text-decoration: none;
}
.container {
    width: 960px;
    background-color: #FFF;
    margin: 0 auto; 
}

.content {
    padding: 10px 0;
}
.fltrt {
    float: right;
    margin-left: 8px;
}
.fltlft { 
    float: left;
    margin-right: 8px;
}
.clearfloat {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
form{
    font-size:14px;
    font-family:Verdana, Geneva, sans-serif;
    color:#333; 
}
form p{
    vertical-align:top;
}
</style>
</head>
<body>
<div class="container">
  <div class="content">
    <h1>Admin Panel</h1>
    <form>
      <p>Section:
        <select name="section" id="section" tabindex="1" onchange="categorylist(this.value)" onfocus="categorylist(this.value)" autofocus="autofocus">
          <option value="Aptitude">Aptitude</option>
          <option value="1">Engineering</option>
          <option value="2">GK</option>
          <option value="3">Interview</option>
          <option value="4">Puzzle &amp; Mind Games</option>
        </select>
      </p>
      <p>Question: 
        <textarea name="question" id="question" cols="45" rows="5" tabindex="2" required="required"></textarea>
      </p>
      <p>Option A: 
        <input type="text" name="optiona" id="optiona" required="required"/>
      </p>
      <p>Option B: 
        <input type="text" name="optionb" id="optionb" required="required"/>
      </p>
      <p>Option C: 
  <input type="text" name="optionc" id="optionc" required="required"/>
      </p>
      <p>Option D: 
        <input type="text" name="optiond" id="optiond" required="required" />
      </p>
      <p>Correct Answer: 
        <label>
          <input type="radio" name="answerswer" value="A" id="answerswer_0" />
          Option A |</label>
        <label>
          <input type="radio" name="answerswer" value="B" id="answerswer_1" />
        Option B |</label>
        <label>
          <input type="radio" name="answerswer" value="C" id="answerswer_2" />
        Option C |</label>
        <label>
          <input type="radio" name="answerswer" value="D" id="answerswer_3" />
        Option D</label>
        <br />
      </p>
      <p>Explanation: 
        <textarea name="explanation" id="explanation" cols="45" rows="5"  required="required"></textarea>
      </p>
      <p>Category: 
        <span name="category" id="category">
            <select name="cat">
                <option></option>
            </select>
        </span>
      </p>
      <p>Sub-category: 
        <span name="subcategory" id="subcategory">
            <select name="subcat">
                <option></option>
            </select>
        </span>
      </p>
      <p>Type: 
        <select name="type" id="type">
          <option value="1">I</option>
          <option value="2">II</option>
          <option value="3">III</option>
          <option value="4">IV</option>
        </select>
      </p>
      <p>
        <input type="submit" name="add" id="add" value="Add" /> 
        <input type="reset" name="reset" id="reset" value="Clear" />
      </p>
    </form>
    </div>
  <!-- end .container -->
  </div>
</body>
</html>

根据注释，这可能会有所帮助：http://jsfiddle.net/TrueBlueAussie/4s4d1qgu/1/

使用jQuery将事件连接到控件，而不是在HTML中使用onchange=和onfocus=属性处理程序。例如：

$('#section').on('focus change', function () {
    var str = $(this).val();
    if (str == "") {
        document.getElementById("category").innerHTML = "";
        return;
    }
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5 
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("category").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "admin-getdata.php?choice=" + str, true);
    xmlhttp.send();
});

如果你查看控制台（比如Chrome），你会看到php在当前目录中被调用，所以请确保你的页面与admin-adddata.php&admin-getdata.php文件。使用像Fiddler2或Chrome F12调试网络面板这样的工具来查看正在发送的内容以及来自服务器的响应。它可能像404（未找到）一样简单。

相关文章：