ajax不适用于localhost

Question

我有一个简单的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'txtHint'，但它不返回任何，如果我试图在java脚本中放置警报也不起作用，我试图添加ajax库并且也不起作用

Answer 1

你正在使用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）并查看控制台，这些问题会产生错误，这有助于您缩小问题范围。

Answer 2

网址错误，你形成一个糟糕的网址，缺少=和& 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

Answer 3

你错过了一个'+'符号，'＆='符号：

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);