Question

我有我的管理页面的代码。之前这段代码曾用于我的系统。但现在它已经不能再工作了。我的客户端需要更新此页面，现在当我尝试运行此页面时，它不会执行JQuery请求。它的作用是在第一个下拉列表的焦点或值的变化，其他类别和子类别下拉列表通过将Jquery请求发送到另一个返回类别值的php文件来更新。另外，我试图在不同的浏览器中运行此页面但没有成功。

还面临通过代码片段发布代码的问题所以在这里编写代码..

代码如下 -

<!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="answer" value="A" id="answer_0" />
          Option A |</label>
        <label>
          <input type="radio" name="answer" value="B" id="answer_1" />
        Option B |</label>
        <label>
          <input type="radio" name="answer" value="C" id="answer_2" />
        Option C |</label>
        <label>
          <input type="radio" name="answer" value="D" id="answer_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>

Answer 1

继续发表评论后，这可能有所帮助：http://jsfiddle.net/TrueBlueAussie/4s4d1qgu/1/

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

$('#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＆amp; admin-getdata.php个文件。使用Fiddler2或Chrome F12调试网络面板等工具查看正在发送的内容以及服务器的响应。它可能像404（未找到）一样简单。

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

1 个答案: