使用AJAX调用php文件
使用AJAX调用php文件
提问于 2018-06-30 04:24:36
我正在尝试使用这个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;
?>onchange函数被触发，因为当选择选项value = ""时，带有id="textHint"的div将被重置。它似乎没有处理我的php文件中的php。会不会是路径问题或代码不兼容？我目前使用/var/www/html/sites/all/libraries目录来包含我的php文件。
回答 3
Stack Overflow用户
发布于 2018-06-30 05:03:30
This.value是否为空？如果函数被onchange事件调用并且文本被重置，这是因为传递的字符串(Str)= "“。
Stack Overflow用户
发布于 2018-06-30 05:21:22
<!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();Stack Overflow用户
发布于 2018-06-30 05:51:09
您的代码运行良好，但在使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51108938
复制相关文章
相似问题
腾讯云开发者
