我有一个简单的Ajax计算,但它没有工作
是JavaScript代码
<script>
function showFees() {
e.preventDefault();
var weight = ('weight').val;
var ship_type== ('ship_type').val;
var eol== ('eol').val;
if (weight == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML =this.responseText;
}
};
xmlhttp.open("GET", "sdr.php?weight=" + weight "ship_type" + ship_type + "eol" + eol, true);
xmlhttp.send();
}
}
这是我的表格
<form>
<label>weight:</label>
<input type="number" name="weight" min="0" value="0">
Ship Type:
<select name="ship_type">
<option value="1">Tankers of Crude Oil</option>
<option value="2">Tankers of Petroleum Products</option>
</select>
Laden Or Ballast:
<select name="eol">
<option value="0">Ballast</option>
<option value="1">Laden</option>
</select>
<input type="submit" onclick="showFees()" value="calc">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
和我的sdr页面来计算最终结果
$weight;
$i=0;
$wpt=0/*weight per ton result*/;
$ship_type;
$eol;/*empty or loaded*/
$channel_weights=array(5,5,10,20,30,50,10000);
$weight = $_REQUEST['weight'];
$ship_type = $_REQUEST['ship_type'];
$eol = $_REQUEST['eol'];
while($weight!=0){
if($weight>=$channel_weights[$i]){
$wpt+=$channel_weights[$i]*$ship_load_vlues[$eol][$ship_type][$i];
$weight-=$channel_weights[$i];
}
else{
$wpt+=$weight*$ship_load_vlues[$eol][$ship_type][$i];
$weight=0;
}
$i++;
}
$final = $wpt*$float_sdr*1000;
echo $final === "0" ? "wrong data" : $final;
?>
我认为echo必须返回到ID&#39; txtHint&#39;但它没有返回任何内容,如果我试图在java脚本中发出警报也不起作用,我试图添加ajax库并且也不起作用
答案 0 :(得分:3)
您正在使用e.preventDefault();
,但此时您尚未定义e
。将其作为按钮传递给参数:
onclick="showFees(event)"
在函数中捕获它:
function showFees(e) {
修复错误的URL格式并对值使用encodeURIComponent:
xmlhttp.open("GET", "sdr.php?weight=" + encodeURIComponent(weight) + "&ship_type" + encodeURIComponent(ship_type) + "&eol" + encodeURIComponent(eol), true);
修正这两条不太接近正确的行:
var ship_type== ('ship_type').val;
var eol== ('eol').val;
应该是:
var ship_type = document.querySelector('select[name=ship_type]').value;
var eol = document.querySelector('select[name=eol]').value;
打开浏览器开发工具(F12)并查看控制台,这些问题会产生错误,这有助于您缩小问题范围。
答案 1 :(得分:0)
网址错误,您形成了一个糟糕的网址,缺少=
和&
来获取GET请求
应该看起来像
xmlhttp.open("GET", "sdr.php?weight=" + weight + "&ship_type=" + ship_type + "&eol=" + eol, true);
要获取输入值,您应该编写正确的代码:
如果你正在使用jquery
var weight = $("[name='weight']").val();
var ship_type = $("[name='ship_type']").val();
var eol = $("[name='eol']").val();
或者js:
var weight = document.querySelector('input[name=weight]').value
var ship_type =document.querySelector('select[name=ship_type]').value
var eol = document.querySelector('select[name=eol]').value
也像MrCode回答
e.preventDefault()
会抛出错误,因为e
为undefined
答案 2 :(得分:0)
你错过了一个'+'符号,'&amp; ='符号:
xmlhttp.open("GET", "sdr.php?weight=" + weight "ship_type" + ship_type + "eol" + eol, true);
应该是
xmlhttp.open("GET", "sdr.php?weight=" + weight + "&ship_type=" + ship_type + "&eol=" + eol, true);