Question

我正在尝试使用此guide来使用AJAX对表单进行更改。它无法正常工作，我在排除故障时遇到困难。我当前的代码：

基本页面

<!DOCTYPE html>
<html>
<head>
<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").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 (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","demo_find_location.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="countries" onchange="showUser(this.value)">
<option value="">Select a country:</option>
<option value="1">USA</option>
<option value="2">Canada</option>
<option value="3">China</option>
<option value="4">Viet Nam</option>
</select>
</form>
<br>
<div id="txtHint"><b>Country info will be listed here.</b></div>

</body>
</html>

demo_find_location.php

<?php
$q = intval($_GET['q']);
echo $q;
?>

由于选择选项id="textHint"时重置了value = ""的div，因此触发了onchange函数。它似乎没有处理我的php文件中的php。可能是路径问题或代码不兼容？我目前正在使用 / var / www / html / sites / all / libraries 目录包含我的php文件。

Answer 1

您的代码工作正常，只是在使用javascript / jquery代码时不要忘记在标题中加载jquery库

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
/// rest of your page

此外，这是您目前正在尝试做的精简版，希望它能帮助您理解jquery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script> 
/// We trigger the function onchange
function showUser()
{
// We get the value of the country
var q = document.getElementById("countries").value;
if(!isNaN(q))//We check if the value is a valid number
{
$("#txtHint").load("demo_find_location.php?q="+q);//We load the result in txtHint
}
}
</script> 
<form>
<select id="countries" onchange="showUser()">
<option value="">Select a country:</option>
<option value="1">USA</option>
<option value="2">Canada</option>
<option value="3">China</option>
<option value="4">Viet Nam</option>
</select>
</form>
<br>
<div id="txtHint"><b>Country info will be listed here.</b></div>

Answer 2

This.value是否为null？如果该函数被onchange事件调用，并且短信正在重置，这是因为传递的string（str）=“”。

Answer 3

<!DOCTYPE html>
<html>
    <head>
        <script>
        var baseUrl="this is your website path";
         //
        // http://localhost/websitefolder/path or http://livepath
       //
        var eleTxtHint = document.getElementById("txtHint");
        function showUser(str)
        {
            eleTxtHint.innerHTML="";
            if (str!="") 
            {
                if (window.XMLHttpRequest)
                {
                    xmlhttp=new XMLHttpRequest();
                } else 
                {
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() 
                {
                    if (this.readyState==4 && this.status==200) {
                        var response=JSON.parse(this.responseText);
                        if(response.status==true)
                        {
                            eleTxtHint.innerHTML=this.responseText;
                        }
                        else
                        {
                            alert('somethings went wrong');
                        }
                    }
                    else
                    {
                        alert('somethings went wrong');
                    }
                };
                xmlhttp.open("GET",baseUrl+"demo_find_location.php?q="+str,true);
                xmlhttp.send();`enter code here`
            }
        }
        </script>
    </head>
    <body>
        <form>
            <select name="countries" onchange="showUser(this.value)">
                <option value="">Select a country:</option>
                <option value="1">USA</option>
                <option value="2">Canada</option>
                <option value="3">China</option>
                <option value="4">Viet Nam</option>
            </select>
        </form>
        <br>
        <div id="txtHint"><b>Country info will be listed here.</b></div>
    </body>
</html>

demo_find_location.php

<?php
$q = isset($_GET['q'])?intval($_GET['q']):"";
echo json_encode(array('status'=>true,'data'=>$q));
exit();

使用AJAX调用php文件

3 个答案: